Show non-root items over window

2 posts, 1 answers
  1. Edo
    Edo avatar
    87 posts
    Member since:
    Jul 2015

    Posted 03 Sep 2016 Link to this post

    I am trying to set menu (ul element) z-index bellow the window and all children (on root item hover - .k-animation-container) greater then window z-index.

    I try to set .k-animation-container z-index higher then window, but it doesn't work.

    How can I display menu root items bellow window and all non-root items (everything that opens, including popup menu) above window?

    Dojo.

  2.
  3. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1285 posts

    Posted 06 Sep 2016 Link to this post

    Hello Matjaž,

    The observed behavior is caused by the way the z-index property works in general. The z-index of a child element cannot be higher of the one of its parent element.

    The .k-animation-container div is a child of the corresponding expanded LI element, which in turn is a child either of another .k-animation-container div, or of the root UL the Kendo UI Menu is initialized from. Therefore it is not possible to show one sub-menu level below the Kendo UI Window, and another - on top of it.

    You can only set the z-index of the root UL's descendant LIs to be higher than the Window's one, and therefore show all sub-menus on top of the Window:

    http://dojo.telerik.com/EkIlI/2

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top