mat-select opens behind a modal bootstrap

Question

In an Angular project, I have a form containing mat-selects. I call this form in a bootstrap modal. The problem is that the mat-select drop-down menu opens in the background of the modal. How can I solve this problem?

Form

<form [formGroup]="adhesionForm" (ngSubmit)="onSubmit()">

  <div class="row">
    <div class="col">
      <mat-form-field appearance="outline">
        <mat-label>Année d'étude</mat-label>
        <mat-select formControlName="studyYear">
          <mat-option value="1STPI">1STPI</mat-option>
          <mat-option value="2STPI">2STPI</mat-option>
          <mat-option value="3e">3e</mat-option>
          <mat-option value="4e">4e</mat-option>
          <mat-option value="5e">5e</mat-option>
          <mat-option value="nINSA">Je ne suis pas à l'INSA</mat-option>
        </mat-select>
        <mat-error *ngIf="adhesionForm.invalid">{{getRequiredErrorMessage()}}</mat-error>
      </mat-form-field>
    </div>

  <div class="my-3 text-center">
    <button class="btn btn-primary" type="submit">Valider</button>
  </div>

</form>

Modal

<!-- Modal -->
            <div class="modal fade" #modal [id]="'unvalidModal' + i" tabindex="-1" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h1 class="modal-title fs-5">{{amicaliste.name}} {{amicaliste.lastName}}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    <app-adhesion-form *ngIf="amicaliste " [amicaliste]="amicaliste"></app-adhesion-form>
                  </div>
                  <div class="modal-footer">
                    <a (click)="deleteAmicaliste(amicaliste)" class="details" data-bs-dismiss="modal">Supprimer la demande</a>
                  </div>
                </div>
              </div>
            </div>

How can this problem be resolved? Thanks !

Answer 1

This usually happens when the z-index property of the modal is higher than the mat-select dropdown. You can try setting the z-index of the mat-select to a higher number. If it doesn't work, try using the ::ng-deep selector..

::ng-deep mat-select .your-class {
 z-index: 999; // higher than modal
}