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

Tab contents width

1 Answer 541 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 3
Iron
Iron
Veteran
David asked on 19 Mar 2021, 11:44 PM
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?

1 Answer, 1 is accepted

Sort by
1
Accepted
Nadezhda Tacheva
Telerik team
answered on 24 Mar 2021, 12:47 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TabStrip
Asked by
David
Top achievements
Rank 3
Iron
Iron
Veteran
Answers by
Nadezhda Tacheva
Telerik team
Share this question
or