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

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

Equal Heights Plugin

Answer 2

All you have to do is to set a min-height. (It's taken me ages to find the answer to this .. I hope it helps!).

Here is my code that really works:

$("#tabs").tabs().css({
   'min-height': '400px',
   'overflow': 'auto'
});

Answer 3

In jQuery 1.9, use the heightStyle attribute (docs here)

$( ".selector" ).tabs({ heightStyle: "auto" });

Answer 4

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 5

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 6

The answer by Giannis is correct for getting the tallest height among the tabs, but is missing the code to actually apply that solution. You need to add a way to redisplay the first tab (which will be disappeared by the code) and a way to set the height of each of the content areas.

var height = 0;
//Get the highest height.
$("#tables .ui-widget-content").each(function(){
    $(this).removeClass('ui-tabs-hide');
    var oheight = height; //used to identify tab 0
    if(height < $(this).height())
    {
        height = $(this).height();
    }
    if(oheight != 0)
    {
        $(this).addClass('ui-tabs-hide');
    }
});
//Apply it to each one...
$("#tables .ui-widget-content").height(height);

Answer 7

var biggestHeight = 0;
jQuery.each($(this).find(".ui-tabs-panel"),
            function (index, element) {      
                var needAppend = false;
                if ($(element).hasClass('ui-tabs-hide')) {
                    $(element).removeClass('ui-tabs-hide');
                    needAppend = true;
                }

                if ($(element).height() > biggestHeight)
                    biggestHeight = $(element).height();

                if (needAppend)
                    $(element).addClass('ui-tabs-hide');
            });

Answer 8

I was just looking for this solution, and setting a min-height is only good if you know how high the min height should be in advance.

Instead, I went into the css and changed the ui-tabs class to add "overflow:auto;" as below

.ui-tabs { overflow: auto; position: relative; padding: .2em; zoom: 1; }

This works for me in FF12...I haven't tried it in others. If this works, you may wish to create a separate class to preserve stock functionality and theming interchangeability etc

BTW - the reason you might need dynamic sizing is if you're loading from Ajax, but not using the tab loader method, but rather another function (their method assumes you content is all coming from one url resource which may not be sufficient depending on how advanced you dynamic population is).

HTH

Answer 9

Set tab minimum height and resize property to none...

example:

$("#tab").tabs().css({'resize':'none','min-height':'300px'});

Answer 10

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 11

Check the url:

http://api.jqueryui.com/tabs/#option-heightStyle

$("#tabs").tabs({ heightStyle: "fill" });