Two-line text tabs

[David]

My tabstrip doesn't fit into space allowed. I would like to print my tab text in two line to make tabs shorter. Intuitive solution to decrease width and increase height doesn't seem to work

 <telerik:RadTabStrip runat="server" ID="RadTabStrip1"
                        Orientation="HorizontalTop"  Align="Center"  
                        style="width:100%; margin-top:10px;"
                        SelectedIndex="0" MultiPageID="rmpValueAdded"             
                        Skin="Default">
                        <Tabs>
                            <telerik:RadTab Text="Total Value Added" Width="100px" Height="50px"/>
                            <telerik:RadTab Text="Employee Compensation"/>
                            <telerik:RadTab Text="Proprietor Income"/>
                            <telerik:RadTab Text="Other Property Type Income"/>
                            <telerik:RadTab Text="Tax on Production and Imports"/>
                        </Tabs>
</telerik:RadTabStrip>

Please help

[David]

Any advice? There are gotta be a way

[Nencho]

Hello David,

Thank you for contacting Telerik Support.

I am afraid that with the currently used skin - Default, the desire layout could not be achieved. The RadTabStrip uses a css sprite image for its rendering with this skin and setting Height would reflect as the experienced problematic rendering. This is why, I would suggest you the following approaches, in order to achieve the desired layout:

• If the Default skin needs to be used - you would need to create a custom sprite image for the Default skin having the needed Height and Width, like demonstrated in the following article :
  
  http://www.telerik.com/help/aspnet-ajax/tabstrip-appearance-custom-skin.html
• Another possible approach, if the Default skin needs to be used and you should persist the user-friendly layout is to use the ScrollChildren property of the RadTabStrip, like demonstrated in the following online demo:
  http://demos.telerik.com/aspnet-ajax/tabstrip/examples/functionality/scrolling-and-multi-row-tabs/defaultcs.aspx
• You could use another skin - Silk for example, which rendering differs from the Default one and css styling is applicable, in order to fit the desired scenario. I have prepared a sample example, demonstrating how this could be achieved.

Hope this information helps. I will be glad to assist you any further.

Regards,
Nencho
Telerik

 

 

[David]

Understood. I think you forgot to attach TabStrip folder to your example. Thank you

[David]

Nencho? I think you forgot to attach TabStrip folder to your example. Can you resend you example, please?

[Nencho]

Hello David,

This is quite strange, since I am able to download the referenced attachment. However, I am reattaching the example and below you could find a video, demonstrating the behavior at my end.

http://screencast.com/t/ERKFfieZV

Regards,
Nencho
Telerik

 

 

[David]

I got it. Thank you