I am encountering a problem with a mat-datepicker displaying below a modal in my Angular application. Here are the key details:
Html:
<div class="col-12">
<mat-form-field appearance="fill">
<mat-label>Start Date</mat-label>
<input matInput [matDatepicker]="pickerOne" placeholder="Enter a date" formControlName="year">
<mat-datepicker-toggle matSuffix [for]="pickerOne"></mat-datepicker-toggle>
<mat-datepicker #pickerOne class="custom-datepicker"></mat-datepicker>
<mat-hint>This field is required *</mat-hint>
</mat-form-field>
</div>
Css:
.cdk-overlay-container{ z-index: 2200 !important; }
::ng-deep .cdk-overlay-container {
z-index: 2200 !important;
}
Ts:
constructor(private dialog: MatDialog){}
onCreate(){
this.dialog.open(ModalComponent, {
width: '60%'
})
}
The mat-datepicker should open inside the modal and be completely visible. Current behavior: The mat-datepicker opens behind the modal, making it inaccessible. Attempted solutions:
Tried increasing the z-index of the cdk-overlay-container and ::ng-deep .cdk-overlay-container elements, but the issue persists. I would greatly appreciate any assistance. Have a wonderful evening. Thank you