This is a migrated thread and some comments may be shown as answers.

Wrap Text on Vertical RadTab

1 Answer 96 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Christopher
Top achievements
Rank 1
Christopher asked on 10 Aug 2013, 12:14 PM
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 

1 Answer, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 12 Aug 2013, 09:58 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
TabStrip
Asked by
Christopher
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Share this question
or