Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    When entering the application styles I found the following ".cdk-global-overlay-wrapper" modify the "z-index" to a value of 1000, but this does not work if no changes are made to the encapsulation of the .ts file . The solution was the following: Ts

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

    CSS:

    .cdk-global-overlay-wrapper {
  display: flex ;
  position: absolute ;
  z-index: 1000 ;
}

  2. 0

    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,
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search