jQuery UI Tabs - Automatic Height

Question

In previous versions of jQuery tabs there was an option to automatically set the height of the tab to that of the tallest tab in the group using:

$('#container').tabs({ fxAutoHeight: true });

However this does not seem to work in jQuery UI 1.5.3.

Has this option been removed? If so is there another way to get the same functionality?

Answer 1

After reading over the documentation, it seems that option is no longer available. However, it is very easy to replicate this functionality.

Assuming your tabs are arranged horizontally:

$("ul.tabs a").css('height', $("ul.tabs").height());

Answer 2

It looks like it's no longer there, check out this plugin for the same functionality

Equal Heights Plugin

Answer 3

var height = 0;

$("#tabs .ui-widget-content").each(function(){ $(this).removeClass('ui-tabs-hide'); if(height < $(this).height()) height = $(this).height(); $(this).addClass('ui-tabs-hide'); });

Answer 4

The example by gabriel gave me the right lead but I could not get it to work exactly like that. When looking at the source code example of the jQuery documentation you see that the HTML code is supposed to look like this:

<div id="tabs">
   <ul>
       <li><a href="#fragment-1"><span>One</span></a></li>
       <li><a href="#fragment-2"><span>Two</span></a></li>
       <li><a href="#fragment-3"><span>Three</span></a></li>
   </ul>
   <div id="fragment-1">
       <p>First tab is active by default:</p>
       <pre><code>$('#example').tabs();</code></pre>
   </div>
   ...
</div>

As I have 3 tabs which have content that is rather static, for me it was enough to set the height of all tabs to the height of the highest one, which is #fragment-1 in my case.

This is the code that does this:

$("#tabs div.ui-tabs-panel").css('height', $("#fragment-1").height());

Answer 5

Giannis' example works great in combination with the jQuery equalHeights plugin but there's one problem. My first tab (statistics) which I need to show in rotation hides and I can't figure out how to get it to display first when using eQualHeights. Here's my code:

$(function(){
$('statistics').show();
$("#tabs").tabs({ fx: { opacity: 'toggle', duration:200} }).tabs('rotate', 5000);
        $('#tabs').hover(function(){
                                    $(this).tabs('rotate', 0, false);
                                    },function(){
                                                $(this).tabs({ fx: { opacity: 'toggle', duration:200 } }).tabs('rotate', 5000);
                                                }
                        );

        });

If anyone can help, I would greatly appreciate it.