RadMenu Appears under RadSplitter Pane (Firefox)

10 posts, 0 answers
  1. ADe
    ADe avatar
    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> 
  2. ADe
    ADe avatar
    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   
     {  
       positionabsolute !important;  
     } 
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rodrigo Selada
    Rodrigo Selada avatar
    23 posts
    Member since:
    Nov 2008

    Posted 16 Jul 2009 Link to this post

    Thank you for your answer, ADe. :)

    Regards,

    Rodrigo S.
  5. Jay
    Jay avatar
    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.
  6. praetorion
    praetorion avatar
    9 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">
    <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. 
  7. Sean
    Sean avatar
    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?
  8. Sean
    Sean avatar
    18 posts
    Member since:
    Oct 2008

    Posted 14 Nov 2010 Link to this post

    3 weeks and no one has a clue?
  9. J2K
    J2K avatar
    33 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.
  10. Atanas Korchev
    Admin
    Atanas Korchev avatar
    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.

  11. Martin Roussel
    Martin Roussel avatar
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017