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

Radmenu's submenus Z-index specify by programmatic assigning

6 Answers 128 Views

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

umar okeeffe asked on 12 Dec 2011, 09:00 PM

menuZindexProblem.JPG

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

6 Answers, 1 is accepted

answered on 15 Dec 2011, 11:19 PM

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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

Radmenu's submenus Z-index specify by programmatic assigning

6 Answers, 1 is accepted