Question

Hi I am using the jquery UI tabbed widget and I am trying to create a horizontal scroll bar for the tabs.I have created the code to add new tabs on click when the tabs total width is bigger then the containers.The problem is that the tabs move to the second line witch is not what I want.I want them all to stay on the same line and later I will add 2 buttons to scroll from left to right.Here is the code I created:

jsfiddle

As you can see from what I posted the tabs move on the second line even if I added on the container overflow:scroll.

Answer 1

To get you started, checkout this fiddle.

Here’s the additional JS:

(function() {
    var $tabsCont = $('#tabs_container'),
        $tabs = $tabsCont.children(),
        widthOffset = 10; // The width calculated below is a bit too large...

    $tabsCont.wrap('<div class="tab_cont_wrapper"></div>');
    $tabsCont.width($tabs.length * $tabs.first().width() - widthOffset);
    $tabsCont.height($tabs.first().height());
})();​

I’ll leave it to you to find a better tabs width calculation.

The CSS:

#tabs_container {overflow:hidden !important;}
.tab_cont_wrapper {overflow:auto;}

​