18

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?

11 Answers 11

33

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'
});
2
  • yeap! that really works fine!. Saved me a lot of trouble! Thxs
    – MaVRoSCy
    Mar 11, 2013 at 9:12
  • 1
    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!
    – Tass
    Apr 4, 2013 at 18:22
7

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

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

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

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

Equal Heights Plugin

1
  • Look below at @lee-alesbrook (Lee Alesbrook) answer. best and quickest answer
    – Yuki
    Nov 21, 2013 at 14:59
1

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

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

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

1

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

example:

$("#tab").tabs().css({'resize':'none','min-height':'300px'});
1
  • should be $("#tab").tabs (you left off the s, but SO wouldn't let me change just 1 char in the edit dialog)
    – davej
    Feb 6, 2012 at 16:11
1

Check the url:

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

$("#tabs").tabs({ heightStyle: "fill" });
0
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');
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.