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?
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'
});
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());
It looks like it's no longer there, check out this plugin for the same functionality
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');
});