4

I have an Angular 5 app that must use Angular Material's mat-select inside a Bootstrap modal. The issue is that the dropdown options appear behind the modal. My code looks like this:

<mat-form-field class="mdb-form-field form-adjustments">
    <mat-select placeholder="What fruit are you looking for?" [formControl]="fruitType" [(ngModel)]="defaultFruitType">
        <mat-option *ngFor="let fruitType of fruitTypes" [value]="fruitType">{{ fruitType }}
        </mat-option>
    </mat-select>
</mat-form-field>

I know I should be using the z-index to bring Angular Material's selection options to the front. But the question is on what class? I tried applying it to multiple classes from Angular Material, but to no avail. All of the following have failed:

body div.cdk-overlay-container {
  z-index: 99999;
}

/deep/ .cdk-overlay-pane {
  z-index: 99999 !important;
}

/deep/ .cdk-global-overlay-wrapper, .cdk-overlay-container {
  z-index: 99999 !important;
}

.mat-select-menu-container {
  z-index: 99999 !important;
}

.mat-dialog-container {
  z-index: 99999;
}

/deep/ .mat-select-panel {
  z-index: 99999 !important;
}

/deep/ .mat-primary {
  z-index: 99999 !important;
}

Does anyone know on which class of Angular Material I must apply the z-index to bring the select options to the fore of the modal?

Thanks!

Alex Verzea
  • 421
  • 1
  • 11
  • 30

3 Answers3

7

I experienced the same issue with Angular Material 6/Bootstrap 4. I resolved the issue with the following style in styles.scss file - 

.cdk-global-overlay-wrapper {
     z-index: 1000;
}
user2216584
  • 5,387
  • 3
  • 22
  • 29
3

I experimented with many hack-aways but only thisone worked for me:

.cdk-overlay-container {
  z-index: 9999 !important;
}
Oussama Essamadi
  • 358
  • 8
  • 15
2

for anyone still having trouble with this in 2022, try this:

::ng-deep .cdk-overlay-container {
    z-index: 9999;
}

Posted full answer here: https://stackoverflow.com/a/73182885/17286186

phoenix
  • 41
  • 1