Mobile Z-Index and Styles

4 posts, 0 answers
  1. Bill O'Neil
    Bill O'Neil avatar
    111 posts
    Member since:
    Nov 2004

    Posted 11 May 2015 Link to this post

    When RadMenu renders in mobile-mode - the drop down appears behind other controls - such as RadDock.

    This seems like something that should be corrected.  How do we manually set the z-index for the dropdown (drop downs in desktop mode properly appear over the rad dock.)

     Also - is it possible to alter the width of the mobile dropdown - its far too narrow to display anything other than single word labels.

  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 12 May 2015 Link to this post

    Hi,

    You could set the z-index of the mobile RadMenu dropdown with the following CSS selector:

    html .RadMenuPopup {
        z-index: 9999;
    }

    And the width of the dropdown is set by the Width property of the RadMenu. The attached sample shows both settings in action.

    Regards,
    Dimitar
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bill O'Neil
    Bill O'Neil avatar
    111 posts
    Member since:
    Nov 2004

    Posted 13 May 2015 Link to this post

    The z-index for the popup works great.

    The width has an issue - we're using Auto as the RenderMode - so the menu works in both desktop and mobile form.  For desktop - the menu width is 100% (which works fine - always has) - but the % width seems ignored on mobile.

    If I set the width to 500 it produces a wider dropdown in mobile - but the desktop format isn't correct.

    Can RadMenu handle % widths for mobile?

  5. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 13 May 2015 Link to this post

    Hi,

    I am afraid that the Mobile RadMenu dropdown does not support width set in % out of the box. You could achieve it by adding a few lines of CSS besides the control's Width property set to 100%:

    html .RadMenuPopup {
        width: 100%;
        box-sizing: border-box;
        left: 0 !important;
    }
        html .RadMenuPopup.rmLeft:before, html .RadMenuPopup.rmLeft:after {
            left: 1.44em;
        }

    Note that the value of the left property applied to the before and after pseudo elements controls the position of the small triangle that points to the menu button. You may need to adjust this value based on the actual position of your menu.

    And if you just want a wider dropdown, but not necessarily a fluid one, you could set its width in pixels as follows:

    html .RadMenuPopup {
        width: 400px;
    }


    Regards,
    Dimitar
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top