对话框后面显示的垫选择选项 [英] Mat select options showing behind the Dialog
本文介绍了对话框后面显示的垫选择选项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将表格输入,带有选项的垫选择以及带有选项的自动完成字段也包括在matDialog框中. 问题在于选项显示在对话框的后面.我已经遇到过这些解决方案
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屋!
查看全文