Last Updated: 06 Mar 2020 10:08 by ADMIN
Created on: 05 Mar 2020 08:12
Category: TabStrip
Type: Feature Request
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.
1 comment
Marin Bratanov
Posted on: 05 Mar 2020 08:14


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:

    /* 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: auto;

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

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


Marin Bratanov
Progress Telerik

 UI for Blazor