Mat select options showing behind the Dialog

Question

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>

et here is the style.css file:

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

Any ideas how to fix that ?

Answer 1

Had the same issue and none of the answers (also from different questions) worked for me.

The only answer that was efficient is here where @Zahema is saying:

Not recommeding the z-index: 99999 !important; AT ALL. It's a very exteme soultion that should be used only as a last resort.

In my case it was that the modal was opened in a non-standard way. If you open it using MatDialog service you shouldn't find any issues. If there is then your code is what introduced them, try not to hack your way into a fix.

This solution worked perfectly for me.

Answer 2

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;
}