Having an issue in my Angular project where a form with mat-selects is displayed in a bootstrap modal, causing the mat-select drop-down menu to appear behind the modal. Any ideas on how to fix this problem?
Form
<form [formGroup]="adhesionForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col">
<mat-form-field appearance="outline">
<mat-label>Study Year</mat-label>
<mat-select formControlName="studyYear">
<mat-option value="1STPI">1STPI</mat-option>
<mat-option value="2STPI">2STPI</mat-option>
<mat-option value="3rd">3rd</mat-option>
<mat-option value="4th">4th</mat-option>
<mat-option value="5th">5th</mat-option>
<mat-option value="nonINSA">Not at 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">Submit</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">Delete Request</a>
</div>
</div>
</div>
</div>
Any suggestions on how to address this issue would be greatly appreciated! Thank you!