dialog ovelay over a MatSideNav

[Pierre]

I got a simple custom dialog created with a <kendo-dialog> inside a component. The overlay works great and fills all the screens, except the matSideNav with Menu. The width of the overlay = screen wide.;

I tried to change z-Index of the k-overlay, but nothing works.

The only thing that works is using the Kendo Dialog Service with the outside of the nav container

<div kendoDialogContainer></div>
 

Any ideas?

[Zornitsa]

Hi Pierre,

The issue you’re seeing is caused by how stacking contexts and overlays interact with Angular Material’s MatSideNav. MatSideNav may create its own stacking context, which can cause the Kendo UI for Angular Dialog overlay to appear below it, even if you change the z-index of the .k-overlay element.

Recommended Solution

Using the DialogService with a kendoDialogContainer element placed outside the MatSideNav is indeed the most reliable approach. This ensures the Dialog overlay covers the entire screen, including the side navigation.

Alternatively, if using the DialogService is not desired, the <kendo-dialog> component can be initialized in the HTML markup again outside the MatSideNav. This approach should also work as expected and make the Dialog overlay cover the MatSideNav as well. 

For reference, I am linking below a sample StackBlitz example using MatSideNav with the Kendo UI for Angular Dialog, where the overlay covers the MatSideNav as expected:

• https://stackblitz.com/edit/angular-gv4dknb3 

With the above being said, placing the Dialog definition outside the MatSideNav is indeed the recommended and most robust solution.

Please check out the above information and let me know if I am missing something.

Regards,
Zornitsa
Progress Telerik