Fixed Headers in TabStrip

4 posts, 1 answers
  1. Juerg
    Juerg avatar
    2 posts
    Member since:
    Oct 2014

    Posted 19 Mar 2015 Link to this post

    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)
  2.
  3. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 20 Mar 2015 Link to this post

    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!
     
  5. Juerg
    Juerg avatar
    2 posts
    Member since:
    Oct 2014

    Posted 20 Mar 2015 in reply to Petyo Link to this post

    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.
  7. Answer
    Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 23 Mar 2015 Link to this post

    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!
  8.
Back to Top