Bootstrap Modal 中的 Angular Material 下拉菜单 [英] Angular Material Dropdown inside Bootstrap Modal
问题描述
我有一个 Angular 5 应用程序,它必须在 Bootstrap 模式中使用 Angular Material 的 mat-select
.问题是下拉选项出现在模态后面.我的代码如下所示:
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>
我知道我应该使用 z-index
将 Angular Material 的选择选项放在最前面.但问题是上什么课?我尝试将其应用于 Angular Material 的多个类,但无济于事.以下所有操作均失败:
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;
}
有谁知道我必须在哪类 Angular Material 上应用 z-index
才能将选择选项置于模态的前面?
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?
谢谢!
推荐答案
我在使用 Angular Material 6/Bootstrap 4 时遇到了同样的问题.我在 style.scss 文件中使用以下样式解决了该问题 -
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;
}
这篇关于Bootstrap Modal 中的 Angular Material 下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!