Radmenu's submenus Z-index specify by programmatic assigning

7 posts, 0 answers
  1. umar okeeffe
    umar okeeffe avatar
    19 posts
    Member since:
    Dec 2009

    Posted 12 Dec 2011 Link to this post

    I have a radmenu that I generate by examing sharepoint document library folders and building out a submenu structure based on the folder.
    When I put many of the control on the page, the root menu from other controls shows up over the sub menu of the control.
    Does anyone know how to prevent it, by altering programatically assigning the style for the z index to the sub menus?
    See the attached file for a better understanding of the problem. The text was sanitized for public consumption.


    Edit:
    Additional Information: When rolling over the menu and the subitems menu shows it does properly cover the other menus and they do not show through. However when rolling over it a 2nd time it definitely shows through, as though its z index is larger.

    These controls are each in their own webparts, does that matter? Maybe they're inheriting z-index?

    Edit: more info: the effect only occurs in IE, didn't occur in chrome or mozilla firefox

    My ascx: (customItem is the submenu), these classes are applied programmatically in code
    <style type="text/css">
        .CustomItem
        {
             z-index:99999;
        }
         
        .rootItem
        {
            text-align:center !important;
            text-decoration:none !important;
            z-index:-1;
        }
        .CustomItem:hover
        {
         text-decoration:none !important;  
         
        }
    </style>
    <div id="section" runat="server" >
    <telerik:RadMenu ID="FolderMenu" runat="server">
    </telerik:RadMenu>

  2. umar okeeffe
    umar okeeffe avatar
    19 posts
    Member since:
    Dec 2009

    Posted 13 Dec 2011 Link to this post

    somebody please help me....eeee.... :(
  3. umar okeeffe
    umar okeeffe avatar
    19 posts
    Member since:
    Dec 2009

    Posted 13 Dec 2011 Link to this post

    It actually doesn't work in chrome either.
  4. umar okeeffe
    umar okeeffe avatar
    19 posts
    Member since:
    Dec 2009

    Posted 15 Dec 2011 Link to this post

    Here is an example of it not working that can probably be reproduced really easily, at the end is a screen capture video how the z-index messes up.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2010.1.309.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
        <style type="text/css">
           .CustomItem
        {
           position:relative;
              
            text-align:center !important;
            text-decoration:none !important;
           /* z-index:0 !important;*/
           
                top: 0px;
                left: 0px;
            }
     
        /* .rootItem
        {
            position:relative;
              
            text-align:center !important;
            text-decoration:none !important;
             
        }*/
       .CustomItem:hover
        {
         position:relative;
         text-decoration:none !important;  
         
        }
        
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2010.1.309.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.Core.js, Version=2010.1.309.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" />
                <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2010.1.309.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQuery.js, Version=2010.1.309.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" />
                <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2010.1.309.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQueryInclude.js, Version=2010.1.309.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" />
            </Scripts>
        </telerik:RadScriptManager>
     
        <script type="text/javascript">
            //Put your Java Script code here.
        </script>
     
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
            <telerik:RadMenu runat="server" ID="FolderMenu" cssclass="CustomItem" >
                <Items>
                    <telerik:RadMenuItem Text="Item1" >
                        <Items>
                            <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                             <Items>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             </Items>
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
            <br />
            <telerik:RadMenu runat="server" ID="RadMenu1" cssClass="CustomItem">
                <Items>
                    <telerik:RadMenuItem Text="Item1" >
                        <Items>
                            <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                             <Items>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             </Items>
                            </telerik:RadMenuItem>
                             
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
                
                 
            </telerik:RadMenu> <br />
            <telerik:RadMenu runat="server" ID="RadMenu2" cssClass="CustomItem">
                <Items>
                    <telerik:RadMenuItem Text="Item1" >
                        <Items>
                            <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                              <Items>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             </Items>
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
                
                 
            </telerik:RadMenu>
            <br />
            <telerik:RadMenu runat="server" ID="RadMenu3" cssClass="CustomItem">
                <Items>
                    <telerik:RadMenuItem Text="Item1" >
                        <Items>
                            <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                              <Items>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             </Items>
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem Text="sub item1">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
                
                 
            </telerik:RadMenu>
        </div>
        </form>
    </body>
    </html>


    Here is the screen capture video showing how it messes up
    http://youtu.be/oOdJY65l6AA
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 Dec 2011 Link to this post

    Hi Umar,

    Indeed the behavior that you encounter with the RadMenu control is a bug.  I already logged it in our internal system. Thank you for reporting it. You can also find your Telerik points updated.

    Best wishes,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. umar okeeffe
    umar okeeffe avatar
    19 posts
    Member since:
    Dec 2009

    Posted 20 Dec 2011 Link to this post

    I got around the issue by disabling the menu animations. Seems related to that
  7. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    578 posts

    Posted 20 Dec 2011 Link to this post

    Hello Umar Okeeffe,

    Indeed when you disable animation, this can not happen. Since when you have no menu animation, no two or more menus are showing at the same time and menus are either shown or hidden, with only one being shown and the rest hidden.

    Regards,
    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top