Wrap Text on Vertical RadTab

2 posts, 0 answers
  1. Christopher
    Christopher avatar
    10 posts
    Member since:
    Dec 2008

    Posted 10 Aug 2013 Link to this post

    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"  >
            <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>
    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.


  2. Magdalena
    Magdalena avatar
    411 posts

    Posted 12 Aug 2013 Link to this post

    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.

    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.
  3. DevCraft R3 2016 release webinar banner
Back to Top