Unplanned
Last Updated: 06 Mar 2020 10:08 by ADMIN
Uluç
Created on: 05 Mar 2020 08:12
Category: TabStrip
Type: Feature Request
6
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
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: auto;
        }

    /* 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>

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor