Menu is hidden behind a RadPane

[Daniel]

Hello,

I am working on a project with a RadSplitter and a RadMenu.
The RadMenu is located inside a RadPane.

When I open the Drop-Down menu, it is hidden by the RadPane.
How can I get the RadMenu to appear above the RadPane?

I have used the code example from here

My code of the RadMenu: 

        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">

        function itemOpened(s, e) {
            if ($telerik.isIE8) {
                // Fix an IE 8 bug that causes the list bullets to disappear (standards mode only)
                $telerik.$("li", e.get_item().get_element())
                    .each(function () { this.style.cssText = this.style.cssText; });
            }
        }
    </script>
    <script id="telerikClientEvents2" type="text/javascript">


        function RadMenu_MouseOut(sender, args) {

            if (args.get_item().get_parent() == sender) {
                sender.set_clicked(false);
            }
        }

        function OnClientItemClicking(sender, args) {
            if (args.get_item().get_isOpen() == true) {
                args.set_cancel(true);
                args.get_item().close();
            }

        }

        function AutoResubmit() {

            document.forms["form1"].submit();

        }


        function openMenu() {
            var men = $find("<%=RadMenu1.ClientID%>");
            var item = men.findItemByValue("t1");
            item.open();
        }

        function openMenu_new(itemText) {
            $find("RadMenu1").findItemByValue(itemText).open();
        }
    </script>



</telerik:RadScriptBlock>

                    <telerik:RadMenu ID="RadMenu1" runat="server" Style="top: 0px; left: -2px; height: 35px; z-index: 1000"
                    Skin="MenuFilter"
                    Flow="Vertical"
                    ClickToOpen="true"

                    OnClientItemOpened="itemOpened"
                    OnClientItemClicking="OnClientItemClicking" OnClientMouseOut="RadMenu_MouseOut"
                    EnableShadows="true"
                    EnableEmbeddedSkins="false">
                    <Items>
                        <telerik:RadMenuItem runat="server" PostBack="true" Text="RadMenuItem1" Value="t1" CssClass="btn  btn-primary btn-menu-filter-size">
                            <ContentTemplate>
                                <div id="Div1" class="Wrapper">
                                    <asp:Label ID="Label1" runat="server" Text="AAAAAAAAAAAAA" Font-Size="Large"></asp:Label>
                                    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="500px" Width="500px"></telerik:RadAjaxPanel>
                                </div>
                            </ContentTemplate>
                        </telerik:RadMenuItem>

                        <telerik:RadMenuItem IsSeparator="true" Value="Separator"></telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="RadMenuItem2" Value="t2" CssClass="btn btn-primary btn-menu-filter-size">
                            <ContentTemplate>
                                <div id="Div2" class="Wrapper">
                                    <asp:Label ID="Label2" runat="server" Text="BBBBBBBBBBBBBB" Font-Size="Large"></asp:Label>
                                    <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" Height="500px" Width="500px"></telerik:RadAjaxPanel>
                                </div>
                            </ContentTemplate>
                        </telerik:RadMenuItem>

                             <telerik:RadMenuItem IsSeparator="true" Value="Separator"></telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="RadMenuItem3" Value="t3" CssClass="btn btn-primary btn-menu-filter-size">
                            <ContentTemplate>
                                <div id="Div3" class="Wrapper">
                                    <asp:Label ID="Label3" runat="server" Text="CCCCCCCCCCCCCCC" Font-Size="Large"></asp:Label>
                                    <telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server" Height="500px" Width="500px">
                                        <telerik:RadGrid ID="RadGrid1" runat="server" ShowGroupPanel="true">
                                            <ClientSettings AllowDragToGroup ="true"></ClientSettings>
                                        </telerik:RadGrid>


                                    </telerik:RadAjaxPanel>
                                </div>
                            </ContentTemplate>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenu>

p.s.
I have attached the following video that shows the problem:
http://youtu.be/nMVddEnjNgI

Thanks,
Daniel.

[Vessy]

Hello Daniel,

The RadMenu cannot appear above the RadPane, because by design the RadPane has to be a container for its children and so it keeps them inside its bounds. In order to achieve the desired sliding content scenario I would suggest you to try the SlidingPanes functionality of the RadSplitter:
Sliding Panes

I hope this solution will be applicable for your scenario.

Regards,
Vessy
Telerik

 

 

[Daniel]

Hello Vessy,

Thank you for your reply!

Indeed I am considering using the Sliding Panes.
However at the moment I found another satisfying solution:

<telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="200" Scrolling="None" CssClass="Show_DD_Menu">

   .Show_DD_Menu {
    overflow:visible !important;
}

(I added: overflow: visible! Important;  to the LeftPane)


Sincerely,
Daniel.

[Vessy]

Hi Daniel,

Thank you for sharing your solution with us. Let us know should we can be in any further assistance.

Regards,
Vessy
Telerik

 

 

[Michael]

You the man.