Hi I'm making a school project. And simply want to have a drop down menu. This is apparently harder than I thought.
<div class="parrent">
<div class="row">
<div class="col">
<div ngbDropdown class="d-inline-block" >
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" ngbDropdownMenu >
<button class="dropdown-item" title="This is a test">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
</div>
</div>
</div>
The button itself appears as it should, but when I click it, the list is invisible
I added a title to the button to see if it's actually present, and as you can see on the picture, it IS THERE. But not visible at all. And this is the same if I add any other item, such as a label.
Here's my app.module.ts:
@NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginFormComponent,
RegisterFormComponent,
TeamListComponent,
TeamMemberPendingApprovalsComponent,
EnrollParticipantComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
MatSelectModule,
MatInputModule,
BrowserAnimationsModule,
MDBBootstrapModule.forRoot(),
NgbModule
],
providers: [],
bootstrap: [AppComponent],
})
I have no idea about what could be wrong. I followed all the steps, and even cleared all .css files to if they had any impact.
BootStrap (styles.scss):
/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';
