web-dev-qa-db-ja.com

なぜモーダル内でマット選択が機能しないのですか？クリックすると、モーダルの背後にあるオプションが表示されます

i ngx-bootstrap Modalを使用しました。しかし、内部でマット選択を使用すると問題が発生しました。モーダルの後ろにマット選択オプションが表示されます。私はすでにこれらのソリューション ここでのソリューション および これも です

これが私のコードです

<ng-template style="border: 0px ;z-index: 100" #editTemplate>
  <mat-form-field>
                <mat-select multiple placeholder="Multiple Cities" [(ngModel)]="currentCity" name="Paris" ariaLabel="cities[0]">
                  <mat-option *ngFor="let city of cities" [value]="city.value">
                    {{ city.viewValue }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
<ng-template>
angularmaterial-designangular2-templateangular-material2angular2-modal
11
Hassan Amjad

これは、Zインデックスの競合が原因です。

クイックフィックス

テンプレートを変更css/scssモーダルとマット選択が配置されている場所

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

この問題は、Zインデックスの競合が原因で発生します。以下のスタイルをグローバルCSSファイル（styles.cssファイル）に追加します

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

そして、angular.jsonファイルでこのスタイルを参照していることを確認してください

"styles": [ "src/styles.css", "src/......." ]
5
Shijitha

上記の回答は機能しないようですが、以下のコードは機能しました

.cdk-overlay-connected-position-bounding-box {
  z-index: 99999 !important;
}

これはグローバル（s）cssファイルで機能する必要があります

これは、開いているモーダルの上にマット選択オプションを表示します:)

0
Luke Bellamy

z-index: 99999 !important; AT ALLをお勧めしません。これは、最後の手段としてのみ使用するべき非常に極端な魂です。

私の場合、それはモーダルが非標準的な方法で開かれたということでした。 MatDialogサービスを使用して開いた場合、問題は見つかりません。コードがある場合は、コードがそれらを導入したものであり、修正にハッキングしないようにしてください。

0
Zahema