1

我有modal我有angular-material autocomplete。它的html是这样的

<mat-form-field class="example-full-width dummy-input-field" floatLabel="never">
    <input matInput class="custom-input" (blur)="getValue()" [matAutocomplete]="auto" [formControl]="stateCtrl">
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete" style="z-index: 2000;">
    <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
    </mat-option>
</mat-autocomplete>

但这里的问题是我的autocomplete结果列表显示在这样的模态后面

在此处输入图像描述

您可以在屏幕叠加层的左上方看到一个列表显示。基本上这个列表是material-autcomplete建议列表。我已经尝试过这些 css 来z-index改变autocomplete

 .md-autocomplete-suggestions-container {
   z-index: 100000 !important;
 }
 .cdk-overlay-container {
   z-index: 999999 !important;
 }

但是没有一个解决方案有效。我没有使用bootstrap模式。我正在使用npm simple-modal. 我该如何解决这个问题？

4

2 回答 2

2

在您的组件的 scss 或 css 文件中添加下面

/deep/ .cdk-overlay-container { z-index: 9999; }
于 2021-09-08T10:27:38.610 回答
0

我们需要动态获取 bootstrap 的 z-index 并用一些任意数字递增它并设置为如下所示的时间纠错：

$(document).on('show.bs.modal', '.modal', function (event) {
  const zIndex = 1045 + (10 * $('.modal:visible').length);
  // this zIndex can be assigned to the time-picker
  $(this).css('z-index', zIndex);
  setTimeout(function () {
    $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
  }, 0);
});

这将解决您的问题，但我建议仅使用一个 UI 库进行设计 :)

于 2019-11-18T07:46:03.430 回答