对话框后面显示的垫选择选项

时间:2018-09-06 11:39:08

标签: autocomplete angular6 options

我将表格输入,带有选项的垫选择和带有选项的自动完成字段也包括在matDialog框中。 问题在于选项显示在对话框的后面。我已经遇到过这些解决方案solution1,但是并没有解决此问题。 这是我的代码:

<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文件:

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

有什么办法解决该问题吗?

2 个答案:

答案 0 :(得分:3)

我也有同样的问题。如您所知,此错误是由于z索引的冲突引起的。因此,我将以下CSS放入了0中,从而解决了该问题:

'z'

答案 1 :(得分:0)

遇到了同样的问题,但没有一个答案(也来自不同的问题)对我有用。

唯一有效的答案是 here @Zahema 所说的:

<块引用>

不推荐 z-index: 99999 !important;在所有。这是一个很 应仅作为最后手段使用的极端解决方案。

就我而言,模式是以非标准方式打开的。如果 您使用 MatDialog 服务打开它,您应该不会发现任何问题。如果 那么你的代码就是引入它们的,尽量不要破解你的 进入修复程序。

这个解决方案非常适合我。