Menu always under the windows

3 posts, 0 answers
  1. Simon
    Simon avatar
    159 posts
    Member since:
    Sep 2010

    Posted 28 May 2013 Link to this post

    I'm currently working on an MDI style application.

    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. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 29 May 2013 Link to this post

    Hello Simon,

    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.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Simon
    Simon avatar
    159 posts
    Member since:
    Sep 2010

    Posted 29 May 2013 Link to this post

    Hi Dimo,

    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
Back to Top