Fixed Headers in TabStrip

[Juerg]

I'm trying to fix the tab-headers in a Kendo TabStrip Widget.
Idea is that if there's lot of content inside each tab, the user can scroll the page, but ALWAYS see's the tabs on the top of the page.
I've tried to make css "position:fixed" in the <ul> of the tabs. The header keeps on top, but - if the user scrolls - the content flows over the headers.

See example here: http://dojo.telerik.com/INowI
(you have to adjust the height of the browser so that the content doesn't fit on screen)

[Petyo]

Hello,

the sample you have posted works fine on my side, see screenshot from Chrome.

Regards,
Petyo
Telerik

 

 

[Juerg]

It works, but...
The content from the tabs scrolls OVER the tabs themselves (as also seen in your screenshot). The scrolling area of the content should be beyond the tabs.

[Dimo]

Hi Juerg,

In this scenario, the TabStrip containers will always overlay the fixed tab buttons ("headers"), because the page is scrolled and all non-fixed page content moves.

Normally, such scenarios are handled by removing the page scrollbar, adjusting the TabStrip height on window.resize, and scrolling the TabStrip containers instead of the page.

http://jsfiddle.net/dimodi/z0ego29h/

Regards,
Dimo
Telerik