jQuery ui tabs heightStyle: auto not working - getting height from wrong tab

Question

I'm using jQuery UI tabs and as per the documentation have set heightStyle: "auto" to make all tabs as high as the tallest one.

This is the code I'm using to initialise the tabs:

$( "#tabs" ).tabs({
    heightStyle: "auto",
    hide: { effect: "drop", duration: 300 }
});

However it's not setting the tab height to the tallest one, and seem to be using heights from different tabs on different pages.

On this page the tallest tab is the first one, 'Model Overview' however it's setting the height to the 'Gallery' tab.

On this page the tallest one is 'Model Specs' and now it seems to be setting the height to 'Model Overview'.

I've Googled for hours already and I can't figure it out, please help.

Thanks!

Answer 1

I faced this problem today (about 1 year later than you) and I noticed that one reason could be that you are changing tabs' contents after calling tabs().

For example, I had to change this:

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

To this:

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

Furthermore, if you want to change the contents of any tab, you will have to refresh the tabs:

codeThatAltersTabsContents();
$( "#tabs" ).tabs('refresh');