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

Tab Strip - Tab wrapping

2 Answers 299 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Doug
Top achievements
Rank 1
Veteran
Doug asked on 01 Dec 2020, 05:36 PM

Is there a way to force tabs to wrap when there are more tabs than there is space in a horizontal viewport?  I am running into an issue where too many tabs get generated and they end up rendering outside the viewport causing the user to have to scroll.  

The idea is to render something like this.

[Tab 1] [Tab 2] [Tab 3] [Tab 4] [Tab 5] [Tab 6] [Tab 7] [Tab 8]
[Tab 9] [Tab 10]

2 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 02 Dec 2020, 06:21 AM

Hello Doug,

You could do it with a relatively simple CSS rule (example below), but the nice appearance where the active tab flows into the content will only work for the bottommost row of tabs and the other rows may look a tad strange. So, I'd suggest enabling scrolling for the tabs as explained here. I've added your Vote for a built-in feature for this that would make it look better than a scrollbar, though.

<style>
    .tabs-container-we-want-to-wrap-tabs {
        width: 500px;
        border: 1px solid red;
    }

        .tabs-container-we-want-to-wrap-tabs .k-tabstrip-items {
            flex-wrap: wrap;
            /* 
Once this gets implemented, you would be able to set the Class directly on the tabstrip instead of cascading through a parent 
https://feedback.telerik.com/blazor/1450831-css-class-for-the-tab-header-and-for-the-entire-tab-strip 
*/
        }
</style>

<div class="tabs-container-we-want-to-wrap-tabs">
    <TelerikTabStrip>
        @{
            foreach (var item in Enumerable.Range(1, 20))
            {
                <TabStripTab Title="@( $"Item {item}" )">
                    Content for tab @item
                </TabStripTab>
            }
        }
    </TelerikTabStrip>
</div>

 

Regards,
Marin Bratanov
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/.

Mark
Top achievements
Rank 1
commented on 06 Dec 2021, 08:14 PM

I've used the above CSS strategy to make the tabstrip appear properly and it worked great but I upgrade recently to the latest version 2.29 and now I notice that the CSS workaround doesn't work.  If you paste your code above into a razor component you can see what I mean.

Mark

Dimo
Telerik team
commented on 06 Dec 2021, 08:30 PM

@Mark - I added one more answer with the required CSS code for 2.29.
0
Dimo
Telerik team
answered on 06 Dec 2021, 08:30 PM

Hello Mark and everybody,

Here is how to wrap TabStrip tab titles with UI for Blazor 2.29+

<TelerikTabStrip @bind-ActiveTabIndex="@ActiveTabIndex" Class="narrow-tabs">
    <TabStripTab Title="Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1">
        Content
    </TabStripTab>
    <TabStripTab Title="Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 ">
        Content
    </TabStripTab>
    <TabStripTab Title="Tab 3 Tab 3">
        Content
    </TabStripTab>
</TelerikTabStrip>

<style>
    .narrow-tabs {
        width: 400px;
    }
    .narrow-tabs .k-tabstrip-items {
        width: 100%;
    }
    .narrow-tabs .k-tabstrip-items .k-item {
        flex-shrink: unset;
    }
</style>

@code {
    public int ActiveTabIndex { get; set; } = 1;
}

Regards,
Dimo
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!
Mark
Top achievements
Rank 1
commented on 06 Dec 2021, 08:58 PM

It looks like that makes the tabstrip scrollable but the previous css had allowed it to wrap since scrolling on a small screen like a phone isn't a great user experience.

Cheers

Mark

Dimo
Telerik team
commented on 07 Dec 2021, 07:02 AM

@Mark - the new example should make the tabs wrap. What scrolling are you referring to?

Tags
TabStrip
Asked by
Doug
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Dimo
Telerik team
Share this question
or