我有一个Angular 5应用程序，必须在Bootstrap模式中使用Angular Material的 mat-select . 问题是下拉选项出现在模态后面 . 我的代码看起来像这样：
<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>
我知道我应该使用 z-index 将Angular Material的选择选项带到前面 . 但问题是什么课？我尝试将它应用于Angular Material的多个类，但无济于事 . 以下所有都失败了：
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;
}
有谁知道我应该使用哪种类型的角度材料 z-index 将选择选项置于模态的前面？
谢谢！
1 回答
我在Angular Material 6 / Bootstrap 4中遇到了同样的问题 . 我在styles.scss文件中解决了以下样式的问题 -