Menu Over Window Zindexing

2 posts, 0 answers
  1. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 15 Mar 2016 Link to this post

    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:

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3632 posts

    Posted 16 Mar 2016 Link to this post

    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.
Back to Top