Sub Menu Items does not overlay above RadPane in FireFox

3 posts, 1 answers
  1. Kathy
    Kathy  avatar
    7 posts
    Member since:
    Jan 2008

    Posted 27 Feb 2008 Link to this post

    Hi,

    I have a RadMenu which contains some sub menu items. The RadMenu is inside a RadPane which is adjacent to another RadPane in a splitter.

    The Menu works fine in IE7, but in FireFox, the sub menu items go behind the RadPane. I followed an earlier post to set the z-index to a large number, and also set the position to absolute but it has no effects.

    Thanks,
    Kathy

    Below code demonstrates the issue.

    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <style type="text/css">
        .test
        {
         z-index:10000;  
         position:absolute;   
        }
    </style>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadSplitter ID="RadSplitter1" Runat="server" Orientation="Horizontal" >
            <telerik:RadPane ID="RadPane1" Runat="server" Height="30">           
                <telerik:RadMenu ID="RadMenu1" Runat="server" Flow="Horizontal">
                    <Items>
                        <telerik:RadMenuItem Text="A" CssClass="test">
                            <Items>
                                <telerik:RadMenuItem Text="B"></telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenu>
            </telerik:RadPane>
            <telerik:RadPane ID="RadPane2" Runat="server">       
             Testing
            </telerik:RadPane>
        </telerik:RadSplitter>
        </form>
    </body>
    </html>

  2. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 27 Feb 2008 Link to this post

    Hello Kathy ,

    Please find below your modified code snippet that works as expected.

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">     
        .menuPanes     
        {     
            overflow:visible !important;     
        }  
        </style>    
     
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server">  
            </asp:ScriptManager> 
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal">  
                <telerik:RadPane ID="RadPane1" runat="server" Height="30" CssClass="menuPanes">  
                    <telerik:RadMenu ID="RadMenu1" runat="server" Flow="Horizontal">  
                        <Items> 
                            <telerik:RadMenuItem Text="A">  
                                <Items> 
                                    <telerik:RadMenuItem Text="B">  
                                    </telerik:RadMenuItem> 
                                </Items> 
                            </telerik:RadMenuItem> 
                        </Items> 
                    </telerik:RadMenu> 
                </telerik:RadPane> 
                <telerik:RadPane ID="RadPane2" runat="server">  
                    Testing  
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </form> 
    </body> 
    </html> 


    Regards,
    Paul
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Kathy
    Kathy  avatar
    7 posts
    Member since:
    Jan 2008

    Posted 27 Feb 2008 Link to this post

    Hi Paul,

    The solution provided fixes the problem! I also work out if the RadMenu is in nested RadPanes, all parent RadPanes will also need to have overflow set to visible.

    Thanks for the solution and getting back to me that quickly!

    Cheers,
    Kathy
Back to Top