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 ?

score 13 · Answer 1 · answered Oct 30 '18 at 10:48

13

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

answered Oct 30 '18 at 10:48

Steffi Keran Rani J

3,667
4
34
56

3

can i specific this inside class like .homepage .cdk-overlay-container, .cdk-overlay-pane ? – Hien Nguyen Mar 25 '19 at 05:58
1

I had the same issue and I added the code you wrote into my styles.scss and it worked like a charm. thanks a lot, Steffi. – Andrecon May 18 '21 at 19:12
Glad to help @Andrecon :) – Steffi Keran Rani J May 19 '21 at 05:17
1

Perfectly working. Thank you. – Chandan Y S Oct 12 '21 at 10:55

score 1 · Answer 2 · answered Dec 23 '20 at 10:06

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.

Mat select options showing behind the Dialog

2 Answers2

Linked