Мат выбора вариантов, отображаемых за диалогом

Question

Я включаю входные данные формы, выбор матрицы с параметрами и поле автозаполнения с параметрами также в поле 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>

et вот файл style.css:

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

Есть идеи, как это исправить?

Answer 1

У меня тоже была такая же проблема.Как вы узнали, эта ошибка связана с конфликтами z-индексов.Поэтому я добавил следующий CSS в мой global.css, который решил проблему:

.cdk-overlay-container, .cdk-overlay-pane {
     z-index: 9999 !important;
}