JQuery-ui : tabs with heightstyle fill, in a resizable panel, tab content height is not updated

Question

My problem is that when I have a tabs element with the heightStyle set to 'fill', and this tab is inside a resizable element, when the parent resize, the tab content does not resize accordingly.

The code is pretty straightforward:

$("#tabs").tabs({
    heightStyle: 'fill'
});
$('#resize').resizable({
     handles: 's'
});

The css, p being the content of the tabs:

body {
    font-size:62.5%;
}
#tabs {
    height:100%;
}
p {
    background-color:yellow;
    width:100%;
    height:100%;
}

And here is a fiddle showing what I mean: http://jsfiddle.net/C27dF/1/

Basically, you can see that the tab container is resized, but not the content.

Does anybody knows how I could get the tabs to update the height of its content ?

Thanks a lot.

Answer 1

you can use the alsoResize paremeter in your resizable function and set it to a class on all the tabbed content.

something like this(I just picked an arbitrary class placed on the tabs by the ui so oyu could use it or another):

$('#resize').resizable({
 handles: 's',
 alsoResize: '.ui-tabs-panel'
});

heres a working jsfiddle