Introduction
Contribution
Knowledge Base
TabStrip

scrollableBoolean|Object(default: true)

If enabled, the TabStrip will display buttons that will scroll the tabs horizontally, when they cannot fit the TabStrip width. By default scrolling is enabled.

Unless disabled, scrollable must be set to a JavaScript object, which represents the scrolling configuration.

See Scrollable Tabs for more information.

Example - disable scrolling 

<div id="tabstrip">
	<ul>
		<li>Tab Header Number 1</li>
		<li>Tab Header Number 2</li>
		<li>Tab Header Number 3</li>
		<li>Tab Header Number 4</li>
		<li>Tab Header Number 5</li>
		<li>Tab Header Number 6</li>
	</ul>
	<div>Content 1</div>
	<div>Content 2</div>
	<div>Content 3</div>
	<div>Content 4</div>
	<div>Content 5</div>
	<div>Content 6</div>
</div>
<script>
	$("#tabstrip").kendoTabStrip({
		scrollable: false
	});
</script>

scrollable.distanceNumber(default: 200)

Sets the scroll amount (in pixels) applied when the user clicks on a scroll button.

Example 

<div id="tabstrip">
	<ul>
		<li>Tab Header Number 1</li>
		<li>Tab Header Number 2</li>
		<li>Tab Header Number 3</li>
		<li>Tab Header Number 4</li>
		<li>Tab Header Number 5</li>
		<li>Tab Header Number 6</li>
	</ul>
	<div>Content 1</div>
	<div>Content 2</div>
	<div>Content 3</div>
	<div>Content 4</div>
	<div>Content 5</div>
	<div>Content 6</div>
</div>
<script>
	$("#tabstrip").kendoTabStrip({
		scrollable: {
			distance: 30
		}
	});
</script>

scrollable.scrollButtonsPositionString(default: "split")

Sets the scroll buttons position.

Can be set to:

  • start - the buttons are displayed before the tabs
  • end - the buttons are displayed after the tabs
  • split - the previous button is displayed before the tabs and the next button is displayed after the tabs

Example - scrollButtonsPosition set to start 

<div id="tabstrip">
	<ul>
		<li>Tab Header Number 1</li>
		<li>Tab Header Number 2</li>
		<li>Tab Header Number 3</li>
		<li>Tab Header Number 4</li>
		<li>Tab Header Number 5</li>
		<li>Tab Header Number 6</li>
	</ul>
	<div>Content 1</div>
	<div>Content 2</div>
	<div>Content 3</div>
	<div>Content 4</div>
	<div>Content 5</div>
	<div>Content 6</div>
</div>
<script>
	$("#tabstrip").kendoTabStrip({
		scrollable: {
			scrollButtonsPosition: "start"
		}
	});
</script>

Example - scrollButtonsPosition set to end 

<div id="tabstrip">
	<ul>
		<li>Tab Header Number 1</li>
		<li>Tab Header Number 2</li>
		<li>Tab Header Number 3</li>
		<li>Tab Header Number 4</li>
		<li>Tab Header Number 5</li>
		<li>Tab Header Number 6</li>
	</ul>
	<div>Content 1</div>
	<div>Content 2</div>
	<div>Content 3</div>
	<div>Content 4</div>
	<div>Content 5</div>
	<div>Content 6</div>
</div>
<script>
	$("#tabstrip").kendoTabStrip({
		scrollable: {
			scrollButtonsPosition: "end"
		}
	});
</script>

Example - scrollButtonsPosition set to split 

<div id="tabstrip">
	<ul>
		<li>Tab Header Number 1</li>
		<li>Tab Header Number 2</li>
		<li>Tab Header Number 3</li>
		<li>Tab Header Number 4</li>
		<li>Tab Header Number 5</li>
		<li>Tab Header Number 6</li>
	</ul>
	<div>Content 1</div>
	<div>Content 2</div>
	<div>Content 3</div>
	<div>Content 4</div>
	<div>Content 5</div>
	<div>Content 6</div>
</div>
<script>
	$("#tabstrip").kendoTabStrip({
		scrollable: {
			scrollButtonsPosition: "split"
		}
	});
</script>

scrollable.scrollButtonsString(default: "auto")

Sets the scroll buttons visibility.

Can be set to:

  • auto - the buttons are added only when tabstrip enters scrollable mode
  • visible - the buttons are always visible
  • hidden - the buttons are never visible

Example - scrollButtons set to auto 

<div id="tabstrip">
	<ul>
		<li>Tab Header Number 1</li>
		<li>Tab Header Number 2</li>
		<li>Tab Header Number 3</li>
		<li>Tab Header Number 4</li>
		<li>Tab Header Number 5</li>
		<li>Tab Header Number 6</li>
	</ul>
	<div>Content 1</div>
	<div>Content 2</div>
	<div>Content 3</div>
	<div>Content 4</div>
	<div>Content 5</div>
	<div>Content 6</div>
</div>
<script>
	$("#tabstrip").kendoTabStrip({
		scrollable: {
			scrollButtons: "auto"
		}
	});
</script>

Example - scrollButtons set to visible 

<div id="tabstrip">
	<ul>
		<li>Tab Header Number 1</li>
		<li>Tab Header Number 2</li>
		<li>Tab Header Number 3</li>
		<li>Tab Header Number 4</li>
		<li>Tab Header Number 5</li>
		<li>Tab Header Number 6</li>
	</ul>
	<div>Content 1</div>
	<div>Content 2</div>
	<div>Content 3</div>
	<div>Content 4</div>
	<div>Content 5</div>
	<div>Content 6</div>
</div>
<script>
	$("#tabstrip").kendoTabStrip({
		scrollable: {
			scrollButtons: "visible"
		}
	});
</script>

Example - scrollButtons set to hidden 

<div id="tabstrip">
	<ul>
		<li>Tab Header Number 1</li>
		<li>Tab Header Number 2</li>
		<li>Tab Header Number 3</li>
		<li>Tab Header Number 4</li>
		<li>Tab Header Number 5</li>
		<li>Tab Header Number 6</li>
	</ul>
	<div>Content 1</div>
	<div>Content 2</div>
	<div>Content 3</div>
	<div>Content 4</div>
	<div>Content 5</div>
	<div>Content 6</div>
</div>
<script>
	$("#tabstrip").kendoTabStrip({
		scrollable: {
			scrollButtons: "hidden"
		}
	});
</script>
In this article
scrollablescrollable.distancescrollable.scrollButtonsPositionscrollable.scrollButtons
Not finding the help you need?
Contact Support