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?

Solution 1

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

Equal Heights Plugin

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

Solution 3

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

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

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

Solution 5

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

View more solutions