Question

Using jQuery 1.7.1 and jQuery UI 1.8.21.

I am struggling with a bug in my custom jQuery UI Tabs. My tabs are not the usual horizontal type, I have them displayed vertically (fixed width) as some kind of grid and my content is on the right (see picture below).

Now my issue is that everything goes down whenever I select the last tab of the line (5,10,15,…), and 6 comes under 5. The right picture illustrates the problem :

The reasons behind the use of Tabs is that I can use approximately 30k lines from a previous project.

Here is my vertical tabs :

$("#chapters")
    .tabs({ ... })
    .addClass('ui-tabs-vertical ui-helper-clearfix');

My CSS, it includes a lot of tests and mistakes and useless parts but still :

.ui-tabs-vertical .ui-tabs-nav
{
    padding: 2px;
    float: left;
    width: 185px;
    display:inline;
}
.ui-tabs-vertical .ui-tabs-nav li
{
    width:30px;
    height:30px;
    margin: 2px;
    padding:0;
    display:inline;
}
.ui-tabs-vertical .ui-tabs-nav li a
{
    display:block;
    margin:0;padding:0;width:100%;height:100%;
}
.ui-tabs-vertical .ui-tabs-nav li a span
{
    display:block;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    text-align: center;
    line-height: 30px;
    vertical-align: middle;
}
.ui-tabs-vertical .ui-tabs-panel
{
    padding: 3px;
    padding-left:200px;
    max-width: 548px; /* = 768px -10-paddings */
}
.ui-tabs-vertical .ui-state-active
{
    border: 0 solid #000000;
}
.ui-tabs-vertical .ui-tabs-selected
{
    padding-bottom: 0 !important;
    border: 0 solid #000000;
}

The HTML as requested in comments, it is completely generated through JS as there is a lot of algorithms handling these tabs more or less randomly, so here is the structure :

<div id="chapters" style="position:relative" class="ui-tabs">
    <ul>
    <!-- li tags coming from a for-loop -->
        <li>
            <a href="#800001"> <!-- random id but matching divs order -->
                <span style="float:left">1</span> <!-- 1,2,3... -->
            </a>
        </li>
        <!-- ... -->
        <div id="800001" class="ui-tabs-hide">
            <div id="800001_content">
                <!-- content is loaded here later... (xml parsing, lazy loading system,...) -->
            </div>
        </div>
    <!-- end of loop -->
    </ul>
</div>

Here is what I found out so far :

• updated jQuery to 1.8.0, no change.
• updated jQuery UI to 1.8.23, no change.
• removed ui-tabs-selected live with firebug, no result.
• removed ui-state-active live with firebug, no result.
• removed the borders from the tabs (last part of css), no result.
• removed both ui-tabs-selected AND ui-state-active, the design doesn’t break.
• removed ui-tabs-selected and ui-state-active with jQuery in a select or show event.

From my last result I would guess jQuery UI Tabs is applying some CSS to the selected tab that I would need to remove.tab. Unfortunately removing these classes break the tabs functionality, .tabs(“option”,”selected”) cannot be set it just goes to the first tab and of course I need it. So I took a look into this widget’s code but without any luck…

I would be open to any kind of solutions, CSS, Javascript, face palming or even brainwashing. If .tabs() is the source of my problem, I could imagine having .verticalTabs() as a modified clone of .tabs().

I already imagined workarounds by hiding my tabs and making a custom grid with events to select tabs, but I’d rather find another path. 🙂

Thanks in advance for your help!

JSFiddle to try it out : http://jsfiddle.net/zumproductions/v26pE/

Answer 1

If you remove the .ui-tabs-selected class from the li element the problem goes away. So its something in there. In particular it looks like the following styles are the issue:

In the default css:

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
   margin-bottom: 0;
}

Your custom css:

.ui-tabs-vertical .ui-tabs-selected {
    border: 0 solid #000000;
}

To fix it you can set these styles: margin-bottom: 2px and border 1px solid transparent

Updated jsfiddle: http://jsfiddle.net/v26pE/3/