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.

Accepted Answer

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

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

Solution

Problem