Unplanned
Last Updated: 06 Mar 2020 10:08 by ADMIN
Uluç
Created on: 05 Mar 2020 08:12
Category: TabStrip
Type: Feature Request
23
Scrollable tabs

At the moment, if I have many tabs, their titles go off the screen (or the container of the tab strip). I want that they don't stretch my layout, or they don't become invisible.

---

ADMIN EDIT

For the time being, there are two workarounds you can consider:

  • adding a scrollbar to the tabs list:
    <style>
        /* sample settings for the parent of the tab strip to showcase how the rules below work */
        .tab-container {
            border: 1px solid red;
            width: 30%;
        }
    
            /* tab titles will now produce a scrollbar when too wide */
            .tab-container .k-tabstrip .k-tabstrip-items {
                max-width: 100%;
                overflow-x: auto;
                overflow-y: hidden;
            }
    
        /* just to showcase what happens when the content is wide - a separate scrollbar */
        .wide-content {
            background: yellow;
            width: 1200px;
        }
    </style>
    
    <div class="tab-container">
        <TelerikTabStrip>
            @foreach (var item in Enumerable.Range(1, 10))
            {
                <TabStripTab Title="@( $"Item {item}" )"><div class="wide-content">Content for item @item</div></TabStripTab>
            }
        </TelerikTabStrip>
    </div>
  • making the tabs drop into multiple rows:
    <style>
        /* sample settings for the parent of the tab strip to showcase how the rules below work */
        .tab-container {
            border: 1px solid red;
            width: 30%;
        }
    
            /* tabs will wrap on more than one row if there are too many to fit */
            .tab-container .k-tabstrip .k-tabstrip-items {
                flex-wrap:wrap;
            }
    </style>
    
    <div class="tab-container">
        <TelerikTabStrip>
            @foreach (var item in Enumerable.Range(1, 10))
            {
                <TabStripTab Title="@( $"Item {item}" )"><div class="wide-content">Content for item @item</div></TabStripTab>
            }
        </TelerikTabStrip>
    </div>

---

1 comment
ADMIN
Marin Bratanov
Posted on: 05 Mar 2020 08:14

Hi,

At the moment, the tabs simply render one after another. You can control what happens to them after their width exceeds their parent with a bit of CSS like this:

<style>
    /* sample settings for the parent of the tab strip to showcase how the rules below work */
    .tab-container {
        border: 1px solid red;
        width: 30%;
    }

        /* tab titles will now produce a scrollbar when too wide */
        .tab-container .k-tabstrip .k-tabstrip-items {
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
        }

    /* just to showcase what happens when the content is wide - a separate scrollbar */
    .wide-content {
        background: yellow;
        width: 1200px;
    }
</style>

<div class="tab-container">
    <TelerikTabStrip>
        @foreach (var item in Enumerable.Range(1, 10))
        {
            <TabStripTab Title="@( $"Item {item}" )"><div class="wide-content">Content for item @item</div></TabStripTab>
        }
    </TelerikTabStrip>
</div>

b

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor