mat-datepicker appears below modal in Angular, tried adjusting z-index without success

Issue

I'm experiencing an issue with a mat-datepicker appearing below a modal in my Angular application. Here are the relevant details:

Html:

<div class="col-12">
  <mat-form-field appearance="fill">
    <mat-label>Fecha Inicio</mat-label>
    <input matInput [matDatepicker]="pickerOne" placeholder="ingresa una fecha" formControlName="year">
    <mat-datepicker-toggle matSuffix [for]="pickerOne"></mat-datepicker-toggle>
    <mat-datepicker #pickerOne class="custom-datepicker"></mat-datepicker>
    <mat-hint>este campo es obligatorio *</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 within the modal and be fully visible. Actual behavior: The mat-datepicker opens behind the modal, making it inaccessible. Attempted solutions:

Increased the z-index of the cdk-overlay-container and ::ng-deep .cdk-overlay-container elements, but this didn't resolve the issue. I would really appreciate if you could help me. I hope you have a happy night. Thank you

Solution

Can you try around using couple of things?

=> Add z-index to both containers specifically.

.modal-container .cdk-overlay-container {
  z-index: 2200;
}

.custom-datepicker .cdk-overlay-container {
  z-index: 2300; /* Ensure a higher value than the modal's */
}

=> Make changes in encapsulation in your .ts file.

@Component({
  selector: 'app-modal',
  templateUrl: 'modal.component.html',
  styleUrls: ['modal.component.css'],
  encapsulation: ViewEncapsulation.None,
})

Answered By - Bhavy