[Solved] Another menu z-index problem...staying behind a splitter

[Krasimir]

Hello Telerik team,

I'm having the following problem that I can't find the answer here. I'm having a MVC menu control in a MVC Splitter control and when I open the menu it always stays behind the splitter control, no matter what z-index value I put there. I tried so many different approaches placing the z-index but nothing helped. Here is my code snippet:

@(Html.Telerik().Splitter().Name("FullScreen")
    .Orientation(SplitterOrientation.Vertical)
    .Panes(vPanes =>
    {
        vPanes.Add()
        .HtmlAttributes(new { style = "z-index: 100000"})
        .Resizable(false)
        .Collapsible(false)
        .Scrollable(false)
        .Size("45px")
        .Content(
           @<text>
 @{ Html.Telerik().Menu().Name("userMenu")
           .HtmlAttributes(new { style = " z-index: 100000 !important;" })
           .Items(menu =>
                {
                    menu.Add().Text("Home")
                        .Items(item =>
                            {
                                item.Add().Text("Help");
                                item.Add().Text("Themes");
                                item.Add().Text("Logout").Action("Logout", "Account");
                            });
                }).Render();
    }
           </text>
        );

        vPanes.Add()
            .HtmlAttributes(new { style = "z-index:0;" })
            .Content(
                @<text>
                    @(Html.Telerik().Splitter().Name("RenderBodySplitter")
                            .Orientation(SplitterOrientation.Horizontal)
                            .Panes(panels =>
                            {
                                panels.Add().Collapsible(true).Size("150px")
                                    .HtmlAttributes(new { style = "overflow: hidden;" })
                                    .Content(
                                       @(Html.Telerik().PanelBar().Name("NavigationPanelBar")
    .HtmlAttributes(new { style = "width: 100%; float: left" })
    .Items(mainItems =>
    {
        mainItems.Add().Text("Menu").Items(franchiseItems =>
        {
            franchiseItems.Add().Text("SubMenu");
        });
    })
).ToString()
                                    );

                                panels.Add()
                                    .HtmlAttributes(new { style = "overflow: auto" })
                                    .Content(
                                    @RenderBody().ToString()
                                );
                            })
                    )
            </text>
            );
    })
)

Thank you for your help!

[Dimo]

Hi Krasimir,

Splitter panes can be either scrollable or non-scrollable, but in either case, they do not allow content to overflow outside. In your case you need this to make the Menu groups expand properly. Please use a custom CSS class to make the Menu pane allow overflowing:

vPanes.Add().HtmlAttributes(new { @class = "menuPane" })

.menuPane
{
      overflow:visible !important;
      z-index:20;
}

The z-index style is required to elevate the Menu pane to a higher stacking context than the Splitter's other panes and splitbars. 20 is just a random number, you can use a smaller one too.


Regards,
Dimo
the Telerik team