Tabstrip: Keep some tabs visible all the time whereas allowing all others to scroll

7 posts, 0 answers
  1. Ralf
    Ralf avatar
    4 posts
    Member since:
    Aug 2016

    Posted 17 Apr 2018 Link to this post

    Hi @all

    Is there a good way of keeping some tabs within a Tabstrip visible all the time, whereas allowing all others to scroll if tab space is not sufficient. I'm not sure whether this is easy to accomplish as all tabs are placed into a single "ul"-placeholder element that is scrolled if tab space is not sufficient

     

    Bye

    Ralf

     

  2.
  3. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2187 posts

    Posted 18 Apr 2018 Link to this post

    Hi Ralf,

    It is possible through custom CSS to set absolute positioning to a tab, in order to make it visible during scrolling, see this dojo example in which the first tab is always visible, however since it is not according to the design and we haven't tested it in different scenarios we cannot guarantee it won't lead to unexpected behavior.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Ralf
    Ralf avatar
    4 posts
    Member since:
    Aug 2016

    Posted 18 Apr 2018 in reply to Ivan Danchev Link to this post

    Hi

    thanks for the quick response! Seems to work pretty solid in Chrome 66, Edge 16 and IE 11. In Firefox ESR 52.3.7,  the first tab does not stay at its fixed position and is scrolled to the left as soon as you scroll to the right. Interestingly that happens although the first tab has been positioned absolutly.

     

    Bye

    Ralf

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2187 posts

    Posted 20 Apr 2018 Link to this post

    Hi Ralf,

    It appears to be some Firefox-specific behavior with regard to absolute positioning, which I was not able to find a workaround for. Alternatively a fixed position for the tab fixes the displacement behavior (dojo), but bare in mind that if the page is scrolled the fixed position of the tab will cause it to get detached from the TabStrip, in other words it is not recommended setting it if the page is going to be scrolled.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Ralf
    Ralf avatar
    4 posts
    Member since:
    Aug 2016

    Posted 22 Apr 2018 in reply to Ivan Danchev Link to this post

    Same thing here: The only workaround seems to be a fixed positioning. That will work for me as this is a single page application (no body scrolling)

  11. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2187 posts

    Posted 23 Apr 2018 Link to this post

    Hello,

    Setting the left property of the absolutely positioned tab fixes the issue in Firefox: updated dojo example.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  13. Ralf
    Ralf avatar
    4 posts
    Member since:
    Aug 2016

    Posted 23 Apr 2018 in reply to Ivan Danchev Link to this post

    Confirmed! Nice job! Thanks!
  14.
Back to Top