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

Menu Over Window Zindexing

1 Answer 65 Views

Window

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

Dhyan asked on 16 Mar 2016, 12:36 AM

menu-window.png

I have issue with Zindexing (i believe). I am opening a window using RadWindowManager control, i need this window on top of menu layer. What property i need to setting menu or window? Following is the code I am using to open window.

<telerik:RadWindowManager

ClientIDMode="Static"

ID="subWindow"

runat="server"

Width="560"

Height="530"

VisibleStatusbar="false"

Behaviors="Move"

DestroyOnClose="true"

Modal="true"

ShowContentDuringLoad="false"

ShowOnTopWhenMaximized ="true">

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

<script type="text/javascript">

function OpenWin() {

var manager = $find('subWindow');

manager.open('/URL', null);

return false;

}

</script>

</telerik:RadScriptBlock>

Code for generating menu is :

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

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

<head runat="server">

<title></title>

<style>

.demo-container {

border: 0;

}

.demo-container .RadMenu {

margin: 0 auto;

font-size: 16px;

}

html div.RadMenu_Glow .rmPopup {

}

html div.RadMenu_Glow .rmPopup {

background: none repeat scroll 0 0 rgba(104, 176, 237, .75);

}

html .demo-container .RadMenu_Glow .rmRootGroup {

position: relative;

width: 100%;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmGroup {

/*background-color : rgba(183, 209, 227, .75);*/

color: black;

font-size: 14px;

width: 200px;

padding-top:40px;

padding-bottom:40px;

padding-left:10px;

padding-right:10px;

}

html div.RadMenu_Glow .rmMultiColumn {

border: 0;

background: no-repeat scroll 0 0 rgb(133, 199, 254);

}

html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-position:left center;

background-repeat: no-repeat;

padding-left: 190px;

}

html div.RadMenu_Glow .rmItem:nth-of-type(2) .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-image: url("one.jpg");

}

html div.RadMenu_Glow .rmItem:nth-of-type(3) .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-image: url("two.jpg");

}

html div.RadMenu_Glow .rmItem:nth-of-type(4) .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-image: url("three.png");

}

html div.RadMenu_Glow .rmPopup {

/*background: none repeat scroll 0 0 rgba(50, 82, 204, .75);*/

}

.demo-container .RadMenu .rmPopup {

width: 300px;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmLevel2 {

/* background-color: rgba(99, 158, 200, .75);*/

}

html .demo-container .RadMenu_Glow .rmHorizontal .rmItem {

position: static;

}

.demo-container .RadSiteMap .rsmColumnWrap {

margin-bottom: 0px;

}

.demo-container .RadSiteMap_Glow .rsmOneLevel .rsmLink,

.demo-container .RadSiteMap_Glow .rsmTwoLevels .rsmLevel1 .rsmLink,

.demo-container .RadSiteMap_Glow .rsmThreeLevels .rsmLevel2 .rsmLink,

.demo-container .RadSiteMap_Glow .rsmManyLevels .rsmLevel3 .rsmLink {

font-size: 11px;

color: white;

}

.demo-container .rmPopup .itemContent {

padding: 10px 0 40px 90px;

background-repeat: no-repeat;

background-position: 10px center;

}

.demo-container .africa {

background-position: 70px center;

}

.demo-container div.RadSiteMap .rsmItem {

color: #FFFFFF;

list-style-type: square;

margin-left: 5px;

}

.demo-container .rsmColumnWrap {

*display: none;

}

</style>

<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="600"></telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" ClientIDMode="Static" runat="server" Skin="Simple"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel"></telerik:RadAjaxManager>

<div class="demo-container">

<telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Glow" ClickToOpen="false" zindex="8000">

<DefaultGroupSettings Height="270px" />

<Items>

<telerik:RadMenuItem Text="Home" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item A " ><Items >

<telerik:RadMenuItem Text="Menu Item A1" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item A2" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu A3" ></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B " >

<Items >

<telerik:RadMenuItem Text="Menu Item B1" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B2" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu B3" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B4" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B5" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu B6" ></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C " >

<Items >

<telerik:RadMenuItem Text="Menu Item C1" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C2" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C3" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C4" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C5" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C6" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C7" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C8" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C9" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C10" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C11" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C12" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C13" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C14" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C15" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C16" GroupSettings-Offsety ="145" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Add Menu C16 A" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C16 B"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C17" GroupSettings-Offsety ="175" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Add Menu C16 A" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C16 B"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C17 B"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18" GroupSettings-Offsety ="200" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Add Menu C18 A" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18 B"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18 c"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18 D"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

<DefaultGroupSettings RepeatColumns="3" RepeatDirection="Vertical" />

</telerik:RadMenu>

</div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>

</form>

</body>

</html>

Please see window coming now attached picture:

1 Answer, 1 is accepted

answered on 16 Mar 2016, 04:49 PM

Hi,

You should use the z-index property. You can find a full list and how to change it here: http://docs.telerik.com/devtools/aspnet-ajax/controls/controlling-absolute-positioning-with-z-index.

The following resources also treat having a menu over the window:

On a side note, I advise that you remove the ClientIDMode=Static property as it is not supported an can cause issues, as explained in the documentation: http://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/general-troubleshooting#setting-clientidmode-property-to-static-breaks-the-telerik-controls-functionality.

Regards,

Marin Bratanov
Telerik

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.