How to Make Jquery UI Tabs Scroll Horizontally If There Are Too Many Tabs

jQuery tabs enable horizontal scroll

Just add Custom style in your style sheet to .ui-tabs .ui-tabs-nav and .ui-tabs .ui-tabs-nav li if need add parent level unique selector

http://jsfiddle.net/pdnr0op9/3/ like this

jQuery UI tabbed widget add scrollbar when to many tabs

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;}

​

jqGrids in multiple jQuery-UI Tabs inside a jQuery-UI Dialog is causing page's horizontal scroll bar to appear

It's interesting problem! Could you post URL which can be used to examine the problem?

I suppose, that the reason of the problem could be cellWidth function introduced in jqGrid 4.4.0. Just for testing of that you can modify the code of cellWidth and include the line

if ($.browser.msie) { return false; }

somewhere at the beginning of the code of cellWidth. In the case no div having 10000px as left:10000px will be created. Alternatively you can try to use to modify left:10000px to left:-10000px or to make some other experiments. Additionally I would recommend you to read the answer which was the origin of the introduction of cellWidth function.

How to scroll jQuery ui tabs?

I think I have a solution for you, if i understand your question correctly. Here's the live example on jsFiddle.

I added two classes, one that's applied to the overall tab element and one that's applied to each tab panel.

.container{
    width: 600px;
}
.panel{
    height: 150px;
    overflow: auto;
}

(The container class could also be renamed to ui-tabs so that you add to the jQuery UI ui-tabs class, and the panel class could be renamed to ui-tabs-panel so that you add to the jQuery UI ui-tabs-panel class.)

Here's the mark-up that I used...

<div class='main'>
    <div id="tabs" class='container'>
        <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>
        </ul>
        <div id="tabs-1" class='panel'>
            <p>tab1 text...</p>
        </div>
        <div id="tabs-2" class='panel'>
            <p>tab2 text...</p>
        </div>
    </div>
</div>

When I hook this up with some jQuery UI tab magic:

$(document).ready(function() {
    $("#tabs").tabs();
});

I end up with a single scroll bar inside the tab.

I hope this helps!

---

Related Topics