1. Home
  2. Forum
  3. Angular - EJ 2
  4. Z-index in schedule editorrs

Z-index in schedule editorrs

Hello,

I'm customizing schedule editor #editorTemplate with angular material components such as mat-select.

The problem is angular material's overlay is shown behind scheduler's one, so the mat-select options are not visible. 


I've noticed that :

1.Scheduler just initialized and editor is not yet opened

<body>
    <app-root>...</app-root>
    ...
    <div class="e-dlg-container e-schedule-dialog e-dlg-center-center e-schedule-dialog-container" style="z-index: 1001;">
    <div class="e-dlg-container e-quick-dialog e-dlg-center-center" style="z-index: 1002;">
    ...
</body>

2.Editor is opened and angular material components inits just after

<body>
    <app-root>...</app-root>
    ...
    <div class="e-dlg-container e-schedule-dialog e-dlg-center-center e-schedule-dialog-container" style="z-index: 1001;">...</div>
    <div class="e-dlg-container e-quick-dialog e-dlg-center-center" style="z-index: 1002;">...</div>
    <div class="cdk-overlay-container">...</div>
    ...
</body>

At this instant, the cdk-overlay-container is not visible no I've added ::ng-deep.cdk-overlay-container { z-index: 1004; } and its working.


3.The editor is closed and then re-opened, the editor's overlay's z-index seems calculated from existing components and is increased, so cdk-overlay-container is not visible anymore.

<body>
    <app-root>...</app-root>
    ...
    <div class="e-dlg-container e-schedule-dialog e-dlg-center-center e-schedule-dialog-container" style="z-index: 1005; display: flex; position: fixed;">...</div>
    <div class="e-dlg-container e-quick-dialog e-dlg-center-center" style="z-index: 1002;">...</div>
    <div class="cdk-overlay-container">...</div>
    ...
</body>

I think this is normal behaviour of scheduler's overlays but do you have any solution/best practice to keep angular material's overlay visible? I can't manage to set scheduler's z-index constant


Thank you for your help!


1 Reply 1 reply marked as answer
SR Swathi Ravi Syncfusion Team November 24, 2022 07:34 AM UTC

Hi Carla,


Sample: https://stackblitz.com/edit/ej2-angular-schedule-mat-auto-complete-sample-def-zbocaa?file=app.component.html,app.component.css


You can keep  an angular material's overlay visible by overriding the z-index of dialog overlay as shown in below snippet.

  

[app.component.css]

.e-dlg-center-center {

  z-index: 100 !important;

}

.e-dlg-overlay {

  z-index: 102 !important;

}


Regards,

Swathi Ravi


Marked as answer
Loader.
Up arrow icon