Bootstrap模式内的角度材料下拉 [英] 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中遇到了相同的问题.我在styles.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模式内的角度材料下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！