How to make Jquery UI Tabs scroll horizontally if there are too many tabs

Question

Now the image above is an example of \" too many tabs \", It appea

Answer 1

There are multiple scenarios and cases to handle when showing tabs on single line.

1. Simple solution would be to add a div around the ui-tab-header
   and set the overflow as scroll. This method works out of box as the browser handles the scrolling through the tab headers. But the default scrollbar provided by browser will look odd. So you need a customize/stylish scrollbar addon. OR
   • To use an jQuery UI tabs extension like the below one:

Extended jQuery UI widget that offers scroll-able tab feature and does automatically handle responsive page size changes by showing navigation controls when required.

Features:

• It is responsive or fluid layouts
• Has support for touch swipe to scroll through tab headers in touch devices (* requires external dependency)
• Fully customizable & css based styling
• Supports removal of tabs using close button
• No extra HTML structure changes required, it automatically enhances the markups on the fly.

https://davidsekar.github.io/jQuery-UI-ScrollTabs