Tab contents width

[David]

I have four tabs in my tab strip, and the content in each tab is of varying width. The tab item resizes to the width of the content as it changes. Is there any way to set a fixed width for all the tabs so they don't expand and contract all the time?

[Nadezhda Tacheva]

Hi David,

As I consider being able to set fixed with to the tabs a very useful feature to control the TabStrip behavior when dealing with content of different sizes, I have created a feature request for it in our public feedback portal - Add Width parameter for the TabStrip.

I added your vote to keep proper track of the requests and as I have created it on your behalf, you are subscribed to receive email notifications when its status changes( this is the best way to know when a feature is implemented as we announce such information in the portal).

In the meantime, you can control the width of the TabStrip with some custom CSS. You can use its Class parameter to set a custom CSS class to the main wrapping container of the component and then apply the desired styles. Thus, you will be styling only this specific instance of the TabStrip and not all instances on the page/app (in case needed, you can of course add the same CSS class to all instances to have the same styles).

To better illustrate the described approach I've created the below sample. First instance of the TabStrip has the default setup, no additional styles added. Second instance has fixed width. Copy and paste the snippet to test the different behavior with and without fixed width.

 

<TelerikTabStrip>
    <TabStripTab Title="First">
        First tab content. Go to the third tab to see the problem.
    </TabStripTab>
    <TabStripTab Title="Second tab heading longer than others">
        Second tab content. Go to the third tab to see the problem.
    </TabStripTab>
    <TabStripTab Title="Third">
        <div style="width: 2000px;">lorem ipsum</div>Third tab content.
    </TabStripTab>
</TelerikTabStrip>

<style>
    .tab-with-width {
        width: 600px;
    }
</style>

<TelerikTabStrip Class="tab-with-width">
    <TabStripTab Title="First">
        First tab content. Go to the third tab to see the behavior when the TapSrtrip has fixed width.
    </TabStripTab>
    <TabStripTab Title="Second tab heading longer than others">
        Second tab content. Go to the third tab to see the behavior when the TapSrtrip has fixed width.
    </TabStripTab>
    <TabStripTab Title="Third">
        <div style="width: 2000px;">lorem ipsum</div>Third tab content.
    </TabStripTab>
</TelerikTabStrip>

 

Regards,
Nadezhda Tacheva
Progress Telerik