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" ""> 
    <html xmlns="" > 
    <head runat="server">  
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager> 
        <p>Menu Test:</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;">   
                <telerik:RadMenuItem Text="Menu A"></telerik:RadMenuItem> 
                <telerik:RadMenuItem Text="Menu B"></telerik:RadMenuItem> 
        <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"   
                    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 />             
  2. Answer
    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.

    <style type="text/css"
            z-index: 8000 !important; 

    <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" > 
         . . . 

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

Back to Top