Using a stack of RadMenus vertically aligned

Thread is closed for posting
1 posts, 0 answers
  1. E1198842-E431-4E0B-AC3C-FF0B08924D37
    E1198842-E431-4E0B-AC3C-FF0B08924D37 avatar
    6 posts
    Member since:
    Sep 2017

    Posted 20 Sep 2018 Link to this post

    Requirements

    Telerik Product and Version used

    		 Telerik Web UI for ASP.NET AJAX 2018.2.710.45

    Supported Browsers and Platforms

    		 All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    		 HTML/XML, CSS

    PROJECT DESCRIPTION 

    z-index become very handy when stacking elements together, specialy when using interactive elements that may cover the other during the interaction, such as a RadMenu. We have encountered a scenario when multiple RadMenus have been stacked one under the other and ran into the problem that one was overlaying on the other. 

    SOLUTION

    Markup:
    <div class="container">
        <telerik:RadMenu RenderMode="Mobile" ID="RadMenu1" Skin="Black" runat="server" CssClass="rmPopUp1">
        </telerik:RadMenu>
    </div>
    <div class="container">
        <telerik:RadMenu RenderMode="Mobile" ID="RadMenu2" Skin="Silk" runat="server" CssClass="rmPopUp2">
        </telerik:RadMenu>
    </div>
    <div class="container">
        <telerik:RadMenu RenderMode="Mobile" ID="RadMenu3" Skin="Glow" runat="server" CssClass="rmPopUp3">
        </telerik:RadMenu>
    </div>

    CSS:
    <style type="text/css">
        .RadMenu.rmPopUp1,
        .RadMenu.rmPopUp1 .rmSlide,
        .RadMenuPopup.rmPopUp1 {
            z-index: 9000;
        }
      
        .RadMenu.rmPopUp2,
        .RadMenu.rmPopUp2 .rmSlide,
        .RadMenuPopup.rmPopUp2 {
            z-index: 8999;
        }
      
        .RadMenu.rmPopUp3,
        .RadMenu.rmPopUp3 .rmSlide,
        .RadMenuPopup.rmPopUp3 {
            z-index: 8998;
        }
    </style>

    BEFORE & AFTER DEMO
    Here are couple of demos showing the difference before and after the solution:

    RenderMode Lightweight Before

    Lightweight RenderMode Before

    RenderMode Lightweight After

    Lightweight RenderMode After
     

    RenderMode Mobile Before

    Mobile RenderMode Before

    RenderMode Mobile After

    Lightweight RenderMode After
     

     

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.