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

menu z-index

1 Answer 379 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Piyush Bhatt
Top achievements
Rank 2
Piyush Bhatt asked on 16 Dec 2011, 10:28 PM
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.

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Dec 2011, 01:57 PM
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
{
    overflow:visible;
    z-index:1;
    zoom:1;
}

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,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Menu
Asked by
Piyush Bhatt
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Share this question
or