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

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 3

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

example:

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

Answer 4

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

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

Answer 5

Check the url:

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

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

Answer 6

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