I want the Menu to be displayed on top of the Windows but Kendo is always setting z-index style when the Menu and Window are created.
The z-index of the k-animation-container is always set to 10002. The k-window z-index are set to 10003.
With those z-index, the menu items are always hidden behind the windows.
Is there a way to tell the Menu it should be displayed over the Windows without overwriting kendo's generated style because there's a lot of kendo widget that required a specific z-index and I don't want to create new issue with existing item (like the k-overlay for the modal windows)?
Best regards,
Simon
2 Answers, 1 is accepted
The idea is that each Kendo UI Window should be displayed on top of the page content, including Menus. This can be changed if the Menu is inside a higher stacking context, compared to the Window. In other words, locate the Menu's ancestor, which is a direct child of the <body> element, and apply a high-enough z-index, e.g. 20000. Note that this will cause the root Menu items to be displayed over the Window as well, if you drag the Window towards the Menu. I doubt that this is acceptable.
A scenario in which the root Menu items are displayed below the Window, while the expanding Menu groups are displayed over the Window is theoretically achievable, but imposes some restrictions over the HTML markup and styling. For example, the Menu must not be placed inside an existing stacking context, i.e. it should not have a z-index and should not have a parent with a z-index. Moreover, the Window's Javascript source must be modified and the minimum z-index of 10001 in the toFront method should be reduced to some arbitrary value. We can expose this z-index value as a property in the future.
Dimo
Telerik
Rank 1
Thank you for you fast replay.
Your second solution is probably the only one that could work for me but it's against my religion to change any framework source.
An other option that could be implemented would be to add an event in the menu widget that would be triggered after all the hardcoded formatting (something like afterActivate).
Then it would be easy for me to set the z-index by code:
$(e.item).children('.k-animation-container').css('z-index', 99999);I hope I'll see a solution to this problem in a near future... but for now I guess I'll have to live with it.
Best regards,
Simon