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

Sub Menu Items does not overlay above RadPane in FireFox

2 Answers 114 Views

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

Kathy asked on 27 Feb 2008, 10:58 AM

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 Answers, 1 is accepted

Accepted

answered on 27 Feb 2008, 01:07 PM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Sub Menu Items does not overlay above RadPane in FireFox

2 Answers, 1 is accepted