menu z-index

2 posts, 0 answers
  1. Piyush Bhatt
    Piyush Bhatt avatar
    166 posts
    Member since:
    Nov 2007

    Posted 16 Dec 2011 Link to this post

    I read similar issue with window as well. 

    As a general rule, any thing that pops up dynamically (menu, dropdown, auto complete) should have z-index set such a way that it can be seen above all other items currently in the display.

    For example, I created menu in one Splitter Pane and showing the target in another Pane (you can question why would I need that - and there can be better way around) - but the menu was hidden within its own frame and did not show up. I have tried the same thing in ASP Rad Control and had got it working.
  2. Dimo
    Dimo avatar
    8318 posts

    Posted 19 Dec 2011 Link to this post

    Hi Piyush,

    In order to achieve the desired behavior, you need to apply some additional styles to the Menu's parent Pane. For example set a "menuPane" CSS class to the corresponding <div> and then use:

    .k-splitter .menuPane

    The overflow style will allow the Menu dropdown to expand outside the pane's boundaries. Normally panes are scrollable or do not allow overflowing at all.

    The z-index style will allow the dropdown to appear on top of adjacent panes and splitbars, by moving the Menu pane to a higher stacking context. Otherwise the Menu dropdown will expand below all next panes.

    The zoom style is required to fix an IE7 rendering bug, at least on my side. If you don't support this browser, remove the style.

    Kind regards,
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top