This is a migrated thread and some comments may be shown as answers.

Problem with kendo Angular UI window and dialog z-index

1 Answer 2815 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 17 Dec 2018, 02:51 PM

Hi,

I am developing an application that dynamically displays Angular components within kendo window and kendo dialog instances created using the kendo window and dialog services. I've encountered an issue whereby a modal style dialog is being shown from a button click on a window but the dialog's z-index value is less than that of the window and hence the dialog is hidden behind the window. The window has to be dragged out of the way to view the dialog. Also the modal overlay does not cover the window.

The following Stackblitz shows the issue.

https://angular-q5yhqw.stackblitz.io

Regards,

Mark

1 Answer, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 18 Dec 2018, 10:04 AM
Hi Mark,

Thank you for the demonstrated example.

Indeed, at the moment there is no built in functionality, that would allow to control the z-index of the Dialog and Window. However, we could add some custom CSS in order to set a larger z-index of the Dialog, than the Window, so that the Dialog is displayed on top:
.k-dialog-wrapper{
  z-index: 100000;
}

Check the following updated example demonstrating this approach:
https://stackblitz.com/edit/angular-dsblpu?file=src%2Fapp%2Fapp.component.css

I hope this helps. Let us know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Mark
Top achievements
Rank 1
Answers by
Svet
Telerik team
Share this question
or