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?

Transportation

Answer 1

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

Equal Heights Plugin

Hyperborean

Look below at @lee-alesbrook (Lee Alesbrook) answer. best and quickest answer – Hord

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

Agincourt

yeap! that really works fine!. Saved me a lot of trouble! Thxs – Presocratic

The overflow helped me display this in a more attractive manner on mobile devices. It's not quite perfect yet, but I'm closer. Thanks! – Gudren

Answer 3

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

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

Metallography

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());

Buffo

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());

Zuleika

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

Carlina

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

Aland

Answer 8

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

example:

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

Antigorite

should be $("#tab").tabs (you left off the s, but SO wouldn't let me change just 1 char in the edit dialog) – Bavaria

Answer 9

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

Pasteboard

Answer 10

Check the url:

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

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

Demilitarize

Answer 11

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

Samsara