我将表单输入、带有选项的垫选择和带有选项的自动完成字段也包含到垫对话框中。
问题是选项显示在对话框后面。我已经遇到过这些解决方案解决方案1但并没有解决这个问题。
这是我的代码：
<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;
}
有什么想法如何解决这个问题吗？
我也有同样的问题。正如您所发现的，此错误是由于 z 索引冲突造成的。所以我将以下 CSS 放入我的global.css这解决了这个问题：
.cdk-overlay-container, .cdk-overlay-pane {
z-index: 9999 !important;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
