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

RadMenu Appears under RadSplitter Pane (Firefox)

9 Answers 230 Views
Menu
This is a migrated thread and some comments may be shown as answers.
ADe
Top achievements
Rank 1
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

Sort by
0
ADe
Top achievements
Rank 1
answered on 30 Jul 2008, 04:23 PM
I got a solution from support on this. To fix on Firefox 3 add the folliwng style,

.RadMenu   
 {  
   positionabsolute !important;  
 } 
0
Rodrigo Selada
Top achievements
Rank 1
answered on 16 Jul 2009, 05:03 PM
Thank you for your answer, ADe. :)

Regards,

Rodrigo S.
0
Jay
Top achievements
Rank 1
answered on 07 Jan 2010, 04:11 PM
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.
0
fca
Top achievements
Rank 2
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">
<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. 
0
Sean
Top achievements
Rank 1
answered on 26 Oct 2010, 06:44 PM
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?
0
Sean
Top achievements
Rank 1
answered on 14 Nov 2010, 11:28 PM
3 weeks and no one has a clue?
0
J2K
Top achievements
Rank 1
answered on 15 Apr 2011, 01:33 PM
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.
0
Atanas Korchev
Telerik team
answered on 18 Apr 2011, 08:06 AM
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.

0
Martin Roussel
Top achievements
Rank 1
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
Tags
Menu
Asked by
ADe
Top achievements
Rank 1
Answers by
ADe
Top achievements
Rank 1
Rodrigo Selada
Top achievements
Rank 1
Jay
Top achievements
Rank 1
fca
Top achievements
Rank 2
Sean
Top achievements
Rank 1
J2K
Top achievements
Rank 1
Atanas Korchev
Telerik team
Martin Roussel
Top achievements
Rank 1
Share this question
or