Changing the Menu Span tags to Divs or Ps

[Kevon Hayes]

I have a menu that width cannot exceed 175px, I have text that need to wrap, which it cannot do in a <span>.  Is it possible to override the render method to change the <span> elements with <div> or <p> in the RadMenu?  This is possible with .NET server controls, using Control Adapters.  How would one do the same with Telerik Control.

[Kamen Bundev]

Hello Kevon,

Wrapping is usually not an issue with most elements (even spans which in our case are with display: block), however we disable text wrapping inside the menu to provide consistent rendering. Can you describe your use case and provide your RadMenu markup definition and I will be able to help you more. You can also consider using RadMenu root item scrolling - check this demo for more information, but it basically boils down to specifying EnableRootItemScroll="true".

Regards,
Kamen Bundev
the Telerik team

[Kevon Hayes]

Wont changing rootitemscroll to true just add a scroll button to my menu item?  I need my menu items to stay centered and obey the margin/padding styles set.  I added display:block to the rmText class and the menu text still will not wrap.  FYI, I'm using a custom skin built by the Telerik Stylebuilder.  Should I be setting that property on a different class?

[Cori]

Hello Kevon,

If you want the text to wrap you need to do this:

.RadMenu .rmText
{
    white-space: noraml !important;
}

That will force the text to wrap for the menu items.

I hope that helps.

[Kevon Hayes]

Thanks Cori. That was supposed to be "normal" that did the trick, and like Ambien it worked like a dream.  ;-)

[Kamen Bundev]

Hi Kevon,

Yes, the property should read white-space: normal. However, please note that only few RadMenu skins have the ability to cope with wrapped subitems, namely Simple, Sitefinity and Web20 skins.

Regards,
Kamen Bundev
the Telerik team

[Kevon Hayes]

Yes it looks that way.  So why isn't display:block not wrapping span as it should? 

[Kamen Bundev]

Hi Kevon,

The whole RadMenu has white-space: nowrap; set on it.

Greetings,
Kamen Bundev
the Telerik team

[Kevon Hayes]

@ Admin the EnableRootItemScroll has the same effect as "white-space: normal !important;"

[Kevon Hayes]

Didn't want to do this but I just added <br /> tags where needed.  Luckily the menu is fairly static.