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

Menu not overlaying over Splitter

6 Answers 186 Views

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

Hoang asked on 15 May 2009, 08:15 PM

Hi, is there a property to make the menu popout over the Splitter? I am trying to build out the layout of a site using a splitter, when the menu pop-out, it will not overlay the splitter. I am using IE8 to view it.

    
            <telerik:RadSplitter ID="RadSplitter1" runat="server"   
        
                    ResizeWithBrowserWindow="true" FullScreenMode="true" Orientation="Horizontal">  
        
                    <telerik:RadPane ID="RadPane1" runat="server">  
        
                        <telerik:RadMenu ID="RadMenu1" runat="server" ClickToOpen="True" EnableOverlay="true">  
        
                            <Items> 
        
                                <telerik:RadMenuItem runat="server" Text="File">  
        
                                    <Items> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                    </Items> 
        
                                </telerik:RadMenuItem> 
        
                            </Items> 
        
                        </telerik:RadMenu> 
        
                    </telerik:RadPane> 
        
                    <telerik:RadPane ID="BodyPane" runat="server" Width="100%" Height="100%" Scrolling="None">  
        
                        <telerik:RadSplitter ID="NavigationPanelContentPanelSplitter" runat="server" Orientation="Vertical" 
        
                            ResizeMode="EndPane" VisibleDuringInit="true"   
        
                            SplitBarsSize="3">  
        
                            <telerik:RadPane ID="NavigationPanelDock" runat="server" Width="100" Height="100%" 
        
                                Scrolling="None" Collapsed="false" Locked="true">  
        
                                Left Pane 
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="NavigationPanelDockSplitBar" runat="server" CollapseMode="None" 
        
                                Enabled="false" Visible="false" /> 
        
                            <telerik:RadPane ID="NavigationPanel" runat="server" Width="100" MinWidth="150" Height="100%" 
        
                                Scrolling="None" Collapsed="false" Locked="false">  
        
                                Right Pane  
        
                            </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                    </telerik:RadPane> 
        
                </telerik:RadSplitter>

6 Answers, 1 is accepted

answered on 16 May 2009, 12:26 PM

Hi Hoang,

Please find below your modified code snippet that works as expected.

    
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
                <style type="text/css">  
        
                    .menuPanes  
        
                    {  
        
                        overflow: visible !important;  
        
                    }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form runat="server" id="mainForm" method="post">  
        
                <telerik:RadScriptManager ID="ScriptManager" runat="server" /> 
        
                <telerik:RadSplitter ID="RadSplitter1" runat="server" ResizeWithBrowserWindow="true" 
        
                    FullScreenMode="true" Orientation="Horizontal">  
        
                    <telerik:RadPane ID="RadPane1" runat="server" CssClass="menuPanes">  
        
                        <telerik:RadMenu ID="RadMenu1" runat="server" ClickToOpen="True" EnableOverlay="true">  
        
                            <Items> 
        
                                <telerik:RadMenuItem runat="server" Text="File">  
        
                                    <Items> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="New" /> 
        
                                    </Items> 
        
                                </telerik:RadMenuItem> 
        
                            </Items> 
        
                        </telerik:RadMenu> 
        
                    </telerik:RadPane> 
        
                    <telerik:RadPane ID="BodyPane" runat="server" Width="100%" Height="100%" Scrolling="None">  
        
                        <telerik:RadSplitter ID="NavigationPanelContentPanelSplitter" runat="server" Orientation="Vertical" 
        
                            ResizeMode="EndPane" VisibleDuringInit="true" SplitBarsSize="3">  
        
                            <telerik:RadPane ID="NavigationPanelDock" runat="server" Width="100" Height="100%" 
        
                                Scrolling="None" Collapsed="false" Locked="true">  
        
                                Left Pane  
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="NavigationPanelDockSplitBar" runat="server" CollapseMode="None" 
        
                                Enabled="false" Visible="false" /> 
        
                            <telerik:RadPane ID="NavigationPanel" runat="server" Width="100" MinWidth="150" Height="100%" 
        
                                Scrolling="None" Collapsed="false" Locked="false">  
        
                                Right Pane  
        
                            </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                    </telerik:RadPane> 
        
                </telerik:RadSplitter> 
        
                </form> 
        
            </body> 
        
            </html>

Regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.