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

Menu not overlaying over Splitter

6 Answers 154 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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Menu not overlaying over Splitter

6 Answers, 1 is accepted