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

[Solved] Menu Always On Top

1 Answer 363 Views

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

Stacey Haslag asked on 21 Dec 2009, 06:43 PM

I am using a RadMenu control along with some modal popups and the RadSpell control. The menu control always appears on top; the modal popups and RadSpell never overlay the menu. I have tried using the Z-Index properties, and have had no luck.

I am using VS 2008, IE7. The version number of the my Telerik dll is: 2009.2.826.35.

I was putting this into a Master Page/Content Page application. I then tried pulling it out into a simple, one page test application, and still cannot get this to work.

Below is the ASPX page on my simple test application (no code-behind). What am I doing wrong?

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MenuTest.aspx.cs" Inherits="Test.MenuTest" %> 
        
            <%@ 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"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server">  
        
                <title></title>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <div> 
        
                <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager> 
        
                <p>&nbsp;</p> 
        
                <p>Menu Test:</p> 
        
                <p>&nbsp;</p> 
        
                <telerik:RadMenu ID="rmnuNavigationMenu" runat="server" Skin="Default" Width="100%"   
        
                    Enabled="True" ExpandDelay="0" CollapseDelay="100" CollapseAnimation-Duration="50" 
        
                    EnableOverlay="false" style="z-index:0;">   
        
                    <Items> 
        
                        <telerik:RadMenuItem Text="Menu A"></telerik:RadMenuItem> 
        
                        <telerik:RadMenuItem Text="Menu B"></telerik:RadMenuItem> 
        
                    </Items> 
        
                 </telerik:RadMenu>    
        
                <br /> 
        
                <br /> 
        
                <asp:Panel ID="pnlAdditionalNotesContent" runat="server" Height="335px" > 
        
                    <div style="padding-left:20px; padding-top:20px; z-index:9000;">        
        
                        <telerik:RadSpell ID="RadSpellAdditionalNotes" runat="server"   
        
                            SupportedLanguages="en-US,English"    
        
                            DictionaryPath="~/App_Data/RadSpell" 
        
                            SpellCheckProvider="TelerikProvider"   
        
                            ControlToCheck="txtAreaAdditionalNotes"                              
        
                            ButtonType="ImageButton" 
        
                            style="z-index:10000;" />   
        
                        <br /> 
        
                        <textarea id="txtAreaAdditionalNotes" runat="server"   
        
                            style="width:96%; height:250px; font-family:Arial;" 
        
                            rows="5" cols="50" tabindex="100"></textarea> 
        
                        <br /> 
        
                        <br />             
        
                    </div> 
        
                </asp:Panel> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

1 Answer, 1 is accepted

Accepted

answered on 22 Dec 2009, 08:03 AM

Hello Stacey,

Give a try with following approach and see whether it is working fine.

CSS:

    
            <style type="text/css"> 
        
                .radwindow 
        
                { 
        
                    z-index: 8000 !important; 
        
                } 
        
            </style>

ASPX:

    
            <telerik:RadMenu style="z-index:10; position:absolute;" ID="rmnuNavigationMenu" runat="server" Skin="Default" Width="100%" 
        
                Enabled="True" ExpandDelay="0" CollapseDelay="100" CollapseAnimation-Duration="50" 
        
                EnableOverlay="false" > 
        
                <Items> 
        
                 . . . 
        
                </Items> 
        
            </telerik:RadMenu>

Checkout the link for more information about Controlling absolute positioning with z-index

-Shinu.