Completed
Last Updated: 03 May 2022 09:01 by ADMIN
Release 3.3.0
David
Created on: 24 Mar 2021 12:28
Category: TabStrip
Type: Feature Request
6
Add Width parameter for the TabStrip

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. I want to be able to set a fixed width for all the tabs so they don't expand and contract all the time.

 

===========

ADMIN EDIT

===========

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

The sample below demonstrates the described approach. First instance of the TabStrip has the default setup, no additional styles added. Second instance has 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>

0 comments