显示在对话框后面的垫子选择选项 [英] Mat select options showing behind the Dialog

问题描述

我将表单输入、带选项的 mat select 和带选项的自动完成字段也包含在 matDialog 框中.问题是选项显示在对话框后面.我已经遇到过这些解决方案 solution1 但没有解决这个问题.这是我的代码:

I am including form inputs, mat select with options and autocomplete field with options too into a matDialog box. The problem is that the options are showing behind the Dialog. I’ve already came across those solutions solution1 but did'nt solve this problem. here is my code:

<mat-form-field class="wrapField">
  <mat-select (selectionChange)="selectChange($event)" formControlName="product" placeholder="Alle Produkte">
    <mat-option *ngFor="let product of products" value="{{product.id}}">{{product.nummer}}</mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field class="wrapTime">
  <input matInput placeholder="Startzeit" [formControl]="myControl" [matAutocomplete]="auto" formControlName="startTime" required>
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{option}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

这里是 style.css 文件:

et here is the style.css file:

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

任何想法如何解决这个问题?

Any ideas how to fix that ?

推荐答案

我也遇到了同样的问题.正如您所发现的，这个错误是由于 z 索引的冲突造成的.所以我把下面的 CSS 放在我的 global.css 中，这解决了这个问题:

I too had the same issue. As you have found out, this bug is due to the conflicts of z-indices. So I put the following CSS in my global.css which solved the issue:

.cdk-overlay-container, .cdk-overlay-pane {
     z-index: 9999 !important;
}

这篇关于显示在对话框后面的垫子选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！