Telerik Forums / UI for ASP.NET AJAX Forum / Menu /

RadMenu Appears under RadSplitter Pane (Firefox)

Telerik UI for ASP.NET AJAX
Resources Buy Try

10 posts, 0 answers

ADe

42 posts

Member since:
Jul 2008

Posted 29 Jul 2008 Link to this post

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>

ADe

42 posts

Member since:
Jul 2008

Posted 30 Jul 2008 Link to this post

I got a solution from support on this. To fix on Firefox 3 add the folliwng style,

.RadMenu

{

position: absolute !important;

}
Rodrigo Selada

23 posts

Member since:
Nov 2008

Posted 16 Jul 2009 Link to this post

Thank you for your answer, ADe. :)

Regards,

Rodrigo S.
Jay

59 posts

Member since:
Apr 2009

Posted 07 Jan 2010 Link to this post

Hey guys,
I am having this same issue and tried using the "absolute" fix that was suggested. It seems to give my menus back but it is throwing the entire menu beyond the rest of the splitter bar, if that makes sense? It's like it is on it's own unique z-index and doesn't obey the Splitter's 100% but the browser's.
fca

10 posts

Member since:
May 2007

Posted 19 Oct 2010 Link to this post

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.
Sean

18 posts

Member since:
Oct 2008

Posted 26 Oct 2010 Link to this post

I'm having the exact same problem. I'm using a splitter and two panes [menu pane, body pane] for my layout. My radmenu is flush to the bottom of the menu pane and when you hover over to get the child items they disapper under the body pane that is adjacent. Is there anything I can do with the Z-index or anything else to have those child items appear above the adjacent pane?
Sean

18 posts

Member since:
Oct 2008

Posted 14 Nov 2010 Link to this post

3 weeks and no one has a clue?
J2K

34 posts

Member since:
Sep 2005

Posted 15 Apr 2011 Link to this post

Any fixes yet for another Telerik bug using Firefox? Have the same issue, which makes Firefox (the preferred browser by an increasing number of users) unusable on one of our sites which uses a Radsplitter, TopPane(containing the RadMenu), and Content Pane. With Firefox, the RadMenu is useless as it appears under the ContentPane.
Atanas Korchev
Admin

8462 posts

Posted 18 Apr 2011 Link to this post

Hi,
Setting the z-index of the menu should help. You can check this knowledge base article for additional info.
All the best,
Atanas Korchev
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Martin Roussel

246 posts

Member since:
Jan 2010

Posted 01 Nov 2012 Link to this post

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

RadMenu Appears under RadSplitter Pane (Firefox)

ADe

ADe

Rodrigo Selada

Jay

fca

Sean

Sean

J2K

Atanas Korchev

Martin Roussel