Declined
Last Updated: 13 Sep 2021 10:13 by ADMIN
Alireza
Created on: 08 Sep 2021 08:48
Category: TabStrip
Type: Feature Request
0
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?

 

 

1 comment
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.