web-dev-qa-db-fra.com

pourquoi mat-select ne fonctionne pas à l'intérieur du modal? onclick, il montre les options derrière le Modal

i J'ai utilisé le modal ngx-bootstrap. Mais j'ai rencontré un problème lorsque j'ai utilisé le tapis de sélection à l'intérieur. Les Options de sélection de tapis s'affichent derrière le Modal. j'ai déjà ces solutions ici la solution et aussi celle-ci

voici mon code

<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

C'est à cause de conflits d'index z.

Correction rapide

Modifier le modèle css/scss où sont placés le modal et le mat-select

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

Le problème se produit en raison de conflits d'index z. Ajoutez le style ci-dessous dans votre fichier CSS global (fichier styles.css)

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

Et assurez-vous de référencer ces styles dans votre fichier angular.json

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

J'ai trouvé que les réponses ci-dessus ne semblaient pas fonctionner mais le code ci-dessous

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

Cela doit aller dans un fichier css global (s) pour fonctionner

Cela montre toutes les options de sélection de tapis au-dessus de tous les modaux ouverts :)

0
Luke Bellamy

Ne pas recommander le z-index: 99999 !important; AT ALL. C'est une soultion très étendue qui ne doit être utilisée qu'en dernier recours.

Dans mon cas, c'est que le modal a été ouvert de manière non standard. Si vous l'ouvrez en utilisant le service MatDialog, vous ne devriez trouver aucun problème. S'il y a alors votre code qui les a introduits, essayez de ne pas pirater votre chemin dans un correctif.

0
Zahema