Question

I have a div with 600px X 150px and i need to paste there a jQuery ui tabs. There will be only 2 tabs, but each tab will contain a lot of text and images, but i don’t want to resize div. If i insert overflow option in css to div or .ui-tabs there appear 2 scrolls – 1 from div and another in tab and it scrolls all tab panel.
Question: how to insert vertical scroll into tab content?

Thanks in advance.

Answer 1

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!