Mobile Z-Index and Styles

[Bill O'Neil]

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.

[Dimitar]

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

 

 

[Bill O'Neil]

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?

[Dimitar]

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