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

Menu Over Window Zindexing

1 Answer 39 Views
Window
This is a migrated thread and some comments may be shown as answers.
Dhyan
Top achievements
Rank 1
Dhyan asked on 16 Mar 2016, 12:36 AM
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>
<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>
  </div
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
    </form>
</body>
</html>

Please see window coming now attached picture:

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
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.
Tags
Window
Asked by
Dhyan
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or