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

RadMenu Appears under RadSplitter Pane (Firefox)

9 Answers 260 Views

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

ADe asked on 29 Jul 2008, 11:26 AM

I have a problem with Firefox in that my RadMenu appears in the RadPane at the top and there is a RadPane below it (all contained in a RadSplitter).

Works fine on IE but in Firefox the menu (when opened) appears under the below RadPane.

Anyone else had this issue...? Here is a simple code example that shows the problem,

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" OutputCompression="AutoDetect">  
        
                    </telerik:RadScriptManager> 
        
                    <telerik:RadSplitter ID="RadSplitter1" runat="server" FullScreenMode="True" Orientation="Horizontal">  
        
                        <telerik:RadPane ID="RadPane1" runat="server" Height="60px">  
        
                            <telerik:RadMenu ID="RadMenu1" runat="server">  
        
                                <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                                <Items> 
        
                                    <telerik:RadMenuItem runat="server" Text="Click Me">  
        
                                        <Items> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 4">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 5">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 6">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 7">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 8">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 9">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 10">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 11">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 12">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 13">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 14">  
        
                                            </telerik:RadMenuItem> 
        
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 15">  
        
                                            </telerik:RadMenuItem> 
        
                                        </Items> 
        
                                    </telerik:RadMenuItem> 
        
                                </Items> 
        
                            </telerik:RadMenu> 
        
                        </telerik:RadPane> 
        
                        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />              
        
                        <telerik:RadPane ID="RadPane2" runat="server">  
        
                        </telerik:RadPane>              
        
                    </telerik:RadSplitter> 
        
                </form> 
        
            </body> 
        
            </html>

9 Answers, 1 is accepted

answered on 19 Oct 2010, 05:47 AM

I am having the same issue as well and I've tried all the suggestion in the forum but it didn't help. Any idea?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Design1.aspx.cs" Inherits="FaxCoreWebClient._debug.Design1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Design 1</title>

<style type="text/css">

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div id="ParentDivElement" style="height: 100%;">

<telerik:RadSplitter ID="RadSplitter1" runat="server" SplitBarsSize="1" LiveResize="true"

Orientation="Horizontal" Height="100%" Width="100%" >

<telerik:RadPane ID="topPane" runat="server" Width="100%" Height="40px" Locked="true" Scrolling="None">

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="overflow:visible;">

<tr>

<td style="width: 50%">

<asp:Image ID="Image1" Height="40px" runat="server" ImageUrl="~/Images/FX-V-Logo.gif" />

</td>

<td style="width: 50%; vertical-align: middle; padding-right: 5px;z-index:9000" align="left">

<telerik:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="True" dir="rtl"

EnableScreenBoundaryDetection="true" EnableOverlay="true" style="z-index:9000">

<Items>

<telerik:RadMenuItem runat="server" PostBack="False" Text="Help" ToolTip="Help Button"

Value="Help">

<Items>

<telerik:RadMenuItem runat="server" Text="User" ToolTip="User help file" Value="UserHelp">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Admin Help" ToolTip="Administrator Help File"

Value="AdminHelp">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" IsSeparator="True" Text="Root RadMenuItem4">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" BorderStyle="None" Text="Logout" ToolTip="Logout Button"

Value="Logout">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" IsSeparator="True" Text="Root RadMenuItem5">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" BorderStyle="None" Enabled="False" PostBack="False"

Text="Sam" ToolTip="Login user name" Value="Sam">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</td>

</tr>

</table>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar2" runat="server" Enabled="false">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPane3" runat="server">

<telerik:RadSplitter ID="RadSplitter2" runat="server" Width="100%" Height="100%"

SplitBarsSize="1">

<telerik:RadPane ID="RadPane1" runat="server" Width="200px">

<telerik:RadSplitter ID="RadSplitter3" runat="server" Orientation="Horizontal">

<telerik:RadPane ID="RadPane5" runat="server">

<asp:Panel ID="Panel2" runat="server">

menu 1

</asp:Panel>

</telerik:RadPane>

<telerik:RadPane ID="RadPane4" runat="server" Height="200px">

<asp:Panel ID="Panel4" runat="server">

menu

</asp:Panel>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" EnableResize="false">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPane2" runat="server">

<asp:Panel ID="Panel3" runat="server">

right

</asp:Panel>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

The the help drop down menu always appear behind the radpane control.

answered on 01 Nov 2012, 04:01 PM

Hi, im in a similar situation where I have a nested splitter control (similar like the last example here: DEMO). I have a vertical RadMenu in the leftmost pane (Demo calls it "Nested Splitter Top Pane"). What I want is be able to see the child menu appearing over the rightmost pane. I know I can use the overflow css property on the pane like mentioned in earlier replies but I also want to menu to NOT overflow when it is vertically too long (then I want the pane vertical scroller to browse it). The reason is my menu is dynamically loaded (not fixed) and I dont want two vertical sliders on the right side of the content (rightmost) pane (which will confuse the users). I also tried setting the menu z-index without luck. In fact, when setting it with a high value, it is displaying over some server controls like RadComboboxes but not the splitter (or its content).

I think I cant use the fixed position solution like the knowledge base says because absolute position need to change depending on what pane are expanded/collapsed (correct me if im wrong here).

Or maybe there is a way to only apply z-index/overflow to child menu items only?

Any idea?

TIA