2013-07-18 3 views
2

Моя проблема в том, что когда у меня есть элемент tabs с установкой heightStyle, чтобы «заполнить», а эта вкладка находится внутри изменяемого размера элемента , когда размер родителя изменяется, содержимое вкладки не изменяется соответственно.JQuery-ui: вкладки с заполнением высот, в изменяемой размер панели, высота содержимого вкладки не обновляется

код довольно прост:

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

CSS-код, где р содержание вкладок:

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

А вот скрипку, показывая, что я имею в виду: http://jsfiddle.net/C27dF/1/

В принципе, вы можете видеть, что размер контейнера табуляции изменяется, но не содержимое.

Кто-нибудь знает, как я могу получить вкладки, чтобы обновить высоту его содержимого?

Большое спасибо.

ответ

3

Вы можете использовать paremeter alsoResize в своей изменяемой размер функции и установить его в класс во всех вкладках.

что-то вроде этого (я просто выбрал произвольный класс помещается на закладках с помощью пользовательского интерфейса, так ою могли использовать его или другой):

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

heres a working jsfiddle

+0

Спасибо, что это именно тот вид ответ я искал! – Sarumanatee