Using a stack of RadMenus vertically aligned

1 posts, 0 answers
  1. Attila Antal
    Attila Antal avatar
    4 posts
    Member since:
    Sep 2017

    Posted 20 Sep 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