Fixed the position of tabs while scrolling.

[Akash]

Here is the my requirement:

If I scroll then I want to fixed my tabs so user can know easily.

I tried multiple way to add position:fixed but not working.

 

[Hetali]

Hi Akash,

To have the Kendo UI TabStrip tabs visible at all times, set the height of the content so it can be scrollable. For example:

.k-tabstrip-top > .k-tabstrip-content {
  height: 85vh;
}

In this StackBlitz example, the Kendo UI TabStrip tabs are fixed. Make sure to set the encapsulation to ViewEncapsulation.None to apply the style locally.

To set the position of the tabs to sticky when your scroll through the browser tab, use the following CSS:

.k-tabstrip-items-wrapper {
  position: sticky;
  top: 0;
  z-index: 11;
  background: #ffffff;
}

StackBlitz example where the TabStrip tab position is set to sticky.

Additionally, to receive a faster turnaround in the future (within 24 hours for Kendo UI - Priority Support license), please open a Support Ticket instead of a Forum post.

I hope the solution helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Akash]

Thanks Hetali.

It worked but I have a one question !

Here i fixed the height of the content but If I scroll through browser scrollbar then It is not working so Is there anyway to fix the issue ?

 

[Hetali]

Hi Akash,

I have updated the answer with the CSS solution that you can use to scroll through the browser and keep the TabStrip tabs sticky.

Let me know if you have any further questions.

Regards,
Hetali
Progress Telerik

[Akash]

Thanks Hetali

You set top:0 but I have a header on top of the screen which is also in fixed position so I think i need to set the value ot top according.

[Hetali]

Hi Akash,

You can set the value of top to the height of the header as seen in this updated StackBlitz example.

.header {
  height: 50px;
}
.k-tabstrip-items-wrapper {
  position: sticky;
  top: 50px;
  z-index: 11;
  background: yellow;
}

Regards,
Hetali
Progress Telerik

[Akash]

Thanks Hetali 👍😊 solution works fine in my project.