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

Z-Index issue with build 2010.3.1317.40

4 Answers 142 Views

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

Richard asked on 28 Jan 2011, 03:01 PM

Hello,

I have a web site that has a radmenu at the top of the page, with a radtabstrip directly below it, then a radwindow(s) below that. I'm using the tabstrip and radwindows to simulate tabs with different web pages, much like IE and other browsers do only this is all within my web site. I am having an issue with the latest build where the radmenu is showing behind the radwindows. Previously this worked fine - I had the z-index on the radmenu set to a large number and the menu would always show on top. When I upgraded to the latest build, the radmenu shows above the tabstrip but below the radwindow. I've tried setting the z-index of the radmenu to something insanely high and also tried setting the z-index to a low value on my radwindowmanager. Neither seem to work, the radmenu always shows behind the radwindow. Is this a bug with the latest build, or is there something new that I need to account for in my page? I downgraded to the previous build and verified this works fine. It's just the latest build that seems to act differently.

Thanks!
Richard

4 Answers, 1 is accepted

answered on 28 Jan 2011, 05:31 PM

Hello,

Thank you for your response. Attached is a sample pageI put together which mimics my issue. When you launch the site, you'll see a single radmenu with submenu options. If you click on one, a RadTabStrip becomes visible with a single tab and a radwindow opens up displaying the web url you clicked in the menu. When this occurs, if you then hover over the radmenu, the submenu options appear behind the radwindow. They do appear over the radtabstrip, it appears it is just the radwindow that is the issue. If you downgrade the Telerik.Web.UI.dll to the previous build, the menu will appear above the radwindow and tabstrip as expected.

Thank you for your help!
Richard

<%@ Page Language="C#" AutoEventWireup="true"

CodeBehind="Default.aspx.cs" Inherits="RadMenuSample._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<head id="Head1" runat="server">

<title></title>

<style type="text/css">

html, body, form

{

height: 100%;

margin-bottom: 0;

margin-right: 0;

margin-left: 0;

margin-top: 10;

padding: 0;

overflow: hidden;

}

.HighZIndex

{

z-index: 5000000;

}

</style>

</head>

<body>

<form id="Form1" runat="server">

<telerik:RadScriptManager ID="scriptSchMaster" runat="server" EnableTheming="True"

EnablePartialRendering="true">

</telerik:RadScriptManager>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">

</telerik:RadStyleSheetManager>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="100%" Width="100%"

LoadingPanelID="LoadingPanel1" HorizontalAlign="NotSet">

<div id="headDiv" style="z-index: 50000000">

<telerik:RadAjaxPanel ID="RadAjaxMenuPanel" runat="server">

<telerik:RadMenu ID="RadMenu1" EnableOverlay="true" runat="server" Skin="Windows7"

CssClass="HighZIndex" OnClientItemClicking="openNewWindow">

<Items>

<telerik:RadMenuItem runat="server" Text="Administrator Tools"

PostBack="False">

<Items>

<telerik:RadMenuItem runat="server" Text="Telerik" Value="http://www.telerik.com"

PostBack="false">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Yahoo" Value="http://www.yahoo.com" PostBack="false">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="ESPN" Value="www.espn.com" PostBack="false">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="CNN" Value="http://www.cnn.com" PostBack="false">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</telerik:RadAjaxPanel>

</div>

<div style="margin-top: 15px">

<telerik:RadTabStrip runat="server" ID="WindowTab" OnClientTabSelecting="WindowTabSelecting"

Style="position: relative">

</telerik:RadTabStrip>

</div>

<asp:Panel runat="server" ID="windowRestrictionZone" Style="width: 100%; height: 90%;

z-index: 40000">

<telerik:RadWindowManager ID="radwinMain" runat="server" KeepInScreenBounds="true"

InitialBehaviors="Maximize" Behavior="None" Modal="False" ReloadOnShow="False"

Height="100%" ShowContentDuringLoad="False" Skin="Office2007" VisibleStatusbar="False"

VisibleTitlebar="False" DestroyOnClose="true" RestrictionZoneID="windowRestrictionZone">

</telerik:RadWindowManager>

</asp:Panel>

</telerik:RadAjaxPanel>

<telerik:RadScriptBlock ID="rdCodeMain" runat="server">

<script type="text/javascript">

var tabStrip = null;

var manager = null;

function pageLoad() {

manager = $find("<%=radwinMain.ClientID %>");

tabStrip = $find("<%=WindowTab.ClientID %>");

}

/*************************************************

openNewWindow2

Opens a new RadWindow and links it with

a new RadTab

*************************************************/

function openNewWindow2(title, url, imageUrl) {

if ((url) && (url != '')) {

var windowURL = url;

var oWnd = radopen(url, null);

oWnd.set_title(title);

oWnd.center();

tabStrip.trackChanges();

//create a new tab

var tab = new Telerik.Web.UI.RadTab();

//set the text of the tab

tab.set_text(title);

oWnd.correspondingTab = tab;

//add the tab to the tabstrip

tabStrip.get_tabs().add(tab);

tabStrip.repaint();

tab.correspondingWnd = oWnd;

oWnd.correspondingTab = tab;

tab.set_imageUrl(imageUrl);

tabStrip.commitChanges();

//Select this tab

tab.select();

}

return true;

}

/*************************************************

openNewWindow2

Opens a new RadWindow and links it with

a new RadTab

*************************************************/

function openNewWindow(sender, args) {

var item = args.get_item();

var itemUrl = item.get_value();

var itemText = item.get_text();

var imageUrl = item.get_imageUrl();

return openNewWindow2(itemText, itemUrl, imageUrl);

}

/*************************************************

WindowTabSelecting

*************************************************/

function WindowTabSelecting(sender, eventArgs) {

var myTabs = eventArgs.get_tab();

HideAllWindows();

myTabs.correspondingWnd.show();

myTabs.correspondingWnd.maximize();

}

/*************************************************

HideAllWindows

*************************************************/

function HideAllWindows() {

var windows = manager.get_windows();

for (var i = 0; i < windows.length; i++) {

var win = windows[i];

win.hide();

}

</script>

</telerik:RadScriptBlock>

</form>

</body>

</html>

answered on 03 Feb 2011, 01:00 PM

Hi Richard,

This is caused by a bugfix which included setting the default z-index directly in RadMenu's base stylesheet. This should fix a strange hasLayout bug in RadMenu and IE8 which involved disappearing of most root items but will override your z-index if it has too low specificity (10-). To fix this, change your z-index CSS rule like this:
div.HighZIndex
{
z-index: 5000000;
}

Regards,
Kamen Bundev
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.