JQuery-ui:具有高度样式填充的选项卡,在可调整大小的面板中,选项卡内容高度不会更新

时间:2013-07-18 15:33:26

标签: jquery jquery-ui jquery-ui-tabs jquery-ui-resizable

我的问题是,当我有一个tabs元素,其heightStyle设置为'fill',并且此选项卡位于可调整大小的元素内时,当父级调整大小时,选项卡内容不会相应地调整大小。

代码很简单:

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

css,p是标签的内容:

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

这是一个显示我的意思的小提琴:http://jsfiddle.net/C27dF/1/

基本上,您可以看到选项卡容器已调整大小,但内容不是。

有人知道如何让标签更新其内容的高度吗?

非常感谢。

1 个答案:

答案 0 :(得分:3)

您可以在可调整大小的函数中使用alsoResize参数,并将其设置为所有选项卡式内容的类。

这样的事情(我刚刚选择了一个由ui放在标签上的任意类,所以oyu可以使用它或其他类):

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

heres a working jsfiddle