Scrollable Kendo Tabstrip when tabs overflow

Question

Has anyone ever been able to get the Kendo tabstrip to scroll when there is a tab overflow?

I can currently get the tab control to present a scroll bar at the bottom, but this is not the desired behavior because it moves the content as well.

We just want to be able scroll between tabs when they overflow.

Has anyone accomplished this? If so, how did you do it?

Answer 1

Found the answer here: http://jsfiddle.net/dimodi/6Z62d/

HTML:

<p>Tabs become scrollable</p>

<div id="tabStrip1">
    <ul>
        <li class="k-state-active">tab item 1</li>
        <li>tab item 2</li>
        <li>tab item 3</li>
        <li>tab item 4</li>
        <li>tab item 5</li>
        <li>tab item 2</li>
        <li>tab item 3</li>
        <li>tab item 4</li>
        <li>tab item 5</li>
    </ul>
    <div>content 1</div>
    <div>content 2</div>
    <div>content 3</div>
    <div>content 4</div>
    <div>content 5</div>
</div>

CSS:

#tabStrip1 > .k-tabstrip-items
{
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

This worked for me.

Answer 2

Check out the documentation on scroll-able tabs:

Kendo UI Scrollable Tabs