Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 29 Oct 2021 05:59 by ADMIN
Alireza
Created on: 08 Sep 2021 08:48
Category: TabStrip
Type: Feature Request
1
How can I make a multiline TabStrip header

Hi All,

I want to build a TabStip with many Tabs in multiline header like this:

, but now all headers located in a long line as shows below:

I could not found any attribute or a HeaderTemplate example to do this.

Can you please help me to do this?

 

 

2 comments
ADMIN
Dimo
Posted on: 29 Oct 2021 05:59

Hi all,

The TabStrip HTML output changed in UI for Blazor version 2.27 and my previous example no longer works. Here is an updated version, which works with both the latest and older UI for Blazor versions.

<TelerikTabStrip Class="multiline-tabs">
    <TabStripTab>
        <HeaderTemplate>
            <span class="tab-inner" style="width: 198px">Tab 1</span>
        </HeaderTemplate>
        <Content>
            Content for Tab 1
        </Content>
    </TabStripTab>
    <TabStripTab>
        <HeaderTemplate>
            <span class="tab-inner" style="width: 198px">Tab 2</span>
        </HeaderTemplate>
        <Content>
            Content for Tab 2
        </Content>
    </TabStripTab>
    <TabStripTab>
        <HeaderTemplate>
            <span class="tab-inner" style="width: 198px">Tab 3</span>
        </HeaderTemplate>
        <Content>
            Content for Tab 3
        </Content>
    </TabStripTab>
    <TabStripTab>
        <HeaderTemplate>
            <span class="tab-inner" style="width: 298px">Tab 4</span>
        </HeaderTemplate>
        <Content>
            Content for Tab 4
        </Content>
    </TabStripTab>
    <TabStripTab>
        <HeaderTemplate>
            <span class="tab-inner" style="width: 298px">Tab 5</span>
        </HeaderTemplate>
        <Content>
            Content for Tab 5
        </Content>
    </TabStripTab>
</TelerikTabStrip>

<style>
    .multiline-tabs {
        width: 600px;
    }

    /* enable tab wrapping */
    .multiline-tabs .k-tabstrip-items {
        flex-wrap: wrap;
        width: 100%;
    }

    /* add borders to all tabs */
    .multiline-tabs .k-tabstrip-items .k-item,
    .multiline-tabs .k-tabstrip-items .k-item.k-state-active {
        border-color: rgba(0, 0, 0, 0.08);
    }

    /* add background to selected tab */
    .multiline-tabs .k-tabstrip-items .k-item.k-state-active {
        background: rgba(0, 0, 0, 0.04);
    }

    /* Move padding to inner header template element. */
    /* This allows easier width calculations. */
    .multiline-tabs .k-tabstrip-items .k-link {
        padding: 0;
    }

    .multiline-tabs .k-tabstrip-items .tab-inner {
        /* allow setting width to an inline element */
        display: block;
        padding: 6px 12px;
        /* configure width to include paddings */
        box-sizing: border-box;
        text-align: center;
    }

</style>

Regards,
Dimo
Progress Telerik

Remote troubleshooting is now easier with Telerik Fiddler Jam. Get the full context to end-users' issues in just three steps! Start your trial here - https://www.telerik.com/fiddler-jam.
ADMIN
Dimo
Posted on: 10 Sep 2021 06:32

Hello Alireza,

Web TabStrips usually provide scrollable tabs for such scenarios and we intend to introduce this feature somewhere in mid 2022.

It is possible to achieve multiline / multirow tabs with custom CSS and I am including an example below. Note that the selected tab will not move to the bottom row. If you don't require perfect alignment of the items in the tab rows, you can remove the header templates and the last 2 CSS rules.

On the other hand, we do not plan multiline tabs for the time being. I will mark this feature request as declined, but we will continue monitoring it for additional feedback or votes.

<TelerikTabStrip Class="multiline-tabs">
    <TabStripTab>
        <HeaderTemplate>
            <span class="tab-inner" style="width: 198px">Tab 1</span>
        </HeaderTemplate>
        <Content>
            Content for Tab 1
        </Content>
    </TabStripTab>
    <TabStripTab>
        <HeaderTemplate>
            <span class="tab-inner" style="width: 198px">Tab 2</span>
        </HeaderTemplate>
        <Content>
            Content for Tab 2
        </Content>
    </TabStripTab>
    <TabStripTab>
        <HeaderTemplate>
            <span class="tab-inner" style="width: 198px">Tab 3</span>
        </HeaderTemplate>
        <Content>
            Content for Tab 3
        </Content>
    </TabStripTab>
    <TabStripTab>
        <HeaderTemplate>
            <span class="tab-inner" style="width: 298px">Tab 4</span>
        </HeaderTemplate>
        <Content>
            Content for Tab 4
        </Content>
    </TabStripTab>
    <TabStripTab>
        <HeaderTemplate>
            <span class="tab-inner" style="width: 298px">Tab 5</span>
        </HeaderTemplate>
        <Content>
            Content for Tab 5
        </Content>
    </TabStripTab>
</TelerikTabStrip>

<style>
    .multiline-tabs {
        width: 600px;
    }

    /* enable tab wrapping */
    .multiline-tabs > .k-tabstrip-items {
        flex-wrap: wrap;
    }

    /* add borders to all tabs */
    .multiline-tabs > .k-tabstrip-items .k-item,
    .multiline-tabs > .k-tabstrip-items .k-item.k-state-active {
        border-color: rgba(0, 0, 0, 0.08);
    }

    /* add background to selected tab */
    .multiline-tabs > .k-tabstrip-items .k-item.k-state-active {
        background: rgba(0, 0, 0, 0.04);
    }

    /* Move padding to inner header template element. */
    /* This allows easier width calculations. */
    .multiline-tabs > .k-tabstrip-items .k-link {
        padding: 0;
    }

    .multiline-tabs > .k-tabstrip-items .tab-inner {
        /* allow setting width to an inline element */
        display: block;
        padding: 6px 12px;
        /* configure width to include paddings */
        box-sizing: border-box;
        text-align: center;
    }

</style>

 

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category