We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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 02:34 AM

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-index100 !important;

}

.e-dlg-overlay {

  z-index102 !important;

}


Regards,

Swathi Ravi


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon