RadMenu overlap with another RadMenu and RadButton

5 posts, 1 answers
  1. Md.Abdullah
    Md.Abdullah avatar
    5 posts
    Member since:
    Jul 2011

    Posted 11 Oct 2011 Link to this post

    I am using RadMenu & RadButton control in an application and I have customized the Radmenu with
    www.stylebuilder.telerik.com
    the problem is when radmenu child items are expand then another radmenu and radbutton is overlapped.

    Please see the screenshot.

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Oct 2011 Link to this post

    Hello Abdullah,

    You can solve this problem by setting z-index property to the second menu and the button which should be less than the first RadMenu.
    Here is a sample code.
    aspx:
    <head runat="server">
      <style type="text/css">
       .btnCSS
       {
           z-index:5000 !important;
       }
       .menu2CSS
       {
         z-index:6000 !important; 
       }
        </style>
    </head>
    <body>
      <form id="form1" runat="server">
       <div>
         <asp:ScriptManager ID="ScriptManager1" runat="server">
         </asp:ScriptManager>
         <telerik:RadMenu ID="RadRM_TopNav" runat="server" Skin="Hay" >
            <Items>
              <telerik:RadMenuItem Width="50px" Text="Root1" >
                <GroupSettings Width="500px" />
                  <Items>
                     <telerik:RadMenuItem Text="Item1">
                     </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="Item2">
                     </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="Item3">
                     </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="Item4">
                     </telerik:RadMenuItem>
                     <telerik:RadMenuItem Text="Item5">
                     </telerik:RadMenuItem>
                 </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Root2">
                    </telerik:RadMenuItem>
                </Items>
           </telerik:RadMenu>
            <br />
            <br />
          <telerik:RadMenu ID="Menu1" runat="server"  CssClass="menu2" >
                <Items>
                    <telerik:RadMenuItem Text="test1">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="test2">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="test3">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
            <br />
         <telerik:RadButton ID="RdBtn" runat="server" Text="RadButton" CssClass="test">
         </telerik:RadButton>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Md.Abdullah
    Md.Abdullah avatar
    5 posts
    Member since:
    Jul 2011

    Posted 12 Oct 2011 Link to this post

    Thanks for replay me ... :)

    It working fine for pages menu but Master page menu is still overlapping with other pages menu...... :(
  5. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Oct 2011 Link to this post

    Hello Abdullah,

    I have tried to reproduce the issue at my end without success. Please make sure that the Z-index of the menu is greater than the ContentPlaceholder.

    Thanks,
    Shinu.
  6. Md.Abdullah
    Md.Abdullah avatar
    5 posts
    Member since:
    Jul 2011

    Posted 14 Nov 2011 Link to this post

    Thanks Shinu, it's working .....
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017