This is a migrated thread and some comments may be shown as answers.

Fixed Headers in TabStrip

3 Answers 449 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Juerg
Top achievements
Rank 1
Juerg asked on 19 Mar 2015, 04:26 PM
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)

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 20 Mar 2015, 09:36 AM
Hello,

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

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Juerg
Top achievements
Rank 1
answered on 20 Mar 2015, 10:02 AM
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.
0
Accepted
Dimo
Telerik team
answered on 23 Mar 2015, 05:47 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TabStrip
Asked by
Juerg
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Juerg
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or