Sticky Tab in the TabStrip
Environment
| Product | Grid for Progress® Telerik® UI for ASP.NET MVC |
Description
How can I make the first tab of the TabStrip sticky? It must remain always visible when I scroll the tabs.
Solution
Use the HtmlAttributes configuration option, to set a custom class (always-visible in the example below) to the first tab. Then use the class as a selector in a CSS rule that customizes the default positioning of the tab.
<div class="container" style="width: 400px">
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Scrollable(true)
.Items(items =>
{
items.Add().Text("Sticky tab").HtmlAttributes(new { @class = "always-visible" })
.Content(@<text>
<p>Tab 1 content...</p>
</text>);
items.Add().Text("Tab 2")
.Content(@<text>
<p>Tab 2 content...</p>
</text>);
items.Add().Text("Tab 3")
.Content(@<text>
<p>Tab 3 content...</p>
</text>);
items.Add().Text("Tab 4")
.Content(@<text>
<p>Tab 4 content...</p>
</text>);
items.Add().Text("Tab 5")
.Content(@<text>
<p>Tab 5 content...</p>
</text>);
})
)
</div>
<style>
.always-visible {
position: sticky !important;
left: 0 !important;
background-color: white;
z-index: 22000;
}
</style>