Menu Always On Top

2 posts, 1 answers
  1. Stacey Haslag
    Stacey Haslag avatar
    30 posts
    Member since:
    Oct 2009

    Posted 21 Dec 2009 Link to this post

    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> 
     
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Dec 2009 Link to this post

    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.
Back to Top