[Solved] Wrap Text on Vertical RadTab

[Christopher]

I have a vertical menu on a RadTabStrip. Is there a way to wrap text displayed on a RadTab?

Here is a sample of the code. I am trying to wrap the text on the third RadTab.

<telerik:RadTabStrip runat="server" ID="RadTabStrip3" MultiPageID="RadMultiPage2"
    Orientation="VerticalLeft" Skin="Windows7" Width="200px" SelectedIndex="0" Align="Left"  >
    <Tabs>
        <telerik:RadTab Height="30px"  Text="Funding Opportunity Announcements"  ></telerik:RadTab>
        <telerik:RadTab Height="30px"  Text="Application Requirements" ></telerik:RadTab>
        <telerik:RadTab Height="60px"  Text="Objective Review of Grant Applications, Selections, and Award" ></telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

I am using ASP.NET 2013 Q1. A previous post suggested modifying the CSS Style sheet but that only worked for horizontal tabs.

Thanks for any help.

Chris 

[Magdalena]

Hi Christopher,

Tabs in the RadTabStrip have set the property white-space to nowrap. So to stop the wrapping you can reset this property with a stronger selector using the following stylesheet

html .RadTabStripVertical .rtsLink {
    white-space: normal;
}

I notice that you are applying Windows7 skin. This skin uses a background image for hovered and selected tabs so it has a fixed height. To fix the issue with the background image when a tab is in two rows you should reset the background image and make the hover and select effect only with CSS. You can find an exemplar solution in the attachment.

Regards,
Magdalena
Telerik