Задача о заполнении аккордеонного пространства JQuery UI

Question

У меня есть div с эффектом аккордеона в контейнере div, я хочу, чтобы div аккордеона полностью заполнял контейнер div

Так что я учусь из демо загрузки сделать fillSpace: true В контейнер div я пишу:

.resizable({
       resize: function () {
       $(".accordion").accordion("resize");
});

, а также контейнер добавляет некоторый класс jquery ui, такой как "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"

, но проблема возникла, когда я перетаскивал и изменял размеры контейнера, независимо от того, длиннее или короче, внутренняя гармошка только становилась длиннее,

Так как я могу решить эту проблему?проблема? вот онлайн-кейс

Спасибо

Answer 1

Есть пара проблем. Как уже упоминалось, размер заголовка не изменяется должным образом при изменении размера портлета. Это потому, что заголовок имеет фиксированную ширину. Используйте ширину 100% следующим образом:

.portlet-header{ width:100%; height:25px;position:relative; }

Основная проблема заключается в том, что при изменении размера div-контент содержимого портлета не изменяется, а только основной портлет. Таким образом, когда вы просите аккордеон изменить размер контейнера, он не становится больше. Вам нужно сделать так, чтобы содержимое портлета заполняло элемент div портлета. Если вы сделаете это:

.portlet-content { overflow:auto; height: 100%; }

Высота содержимого div будет равна высоте раздела портала, что неверно (так как это не будет учитывать размер заголовка).

Вот решение на JavaScript, которое изменяет размер div-содержимого portlet:

$(".portlet").resizable({
    resize: function () {
        var height = $(".portlet").height() - $(".portlet-header").height();
        $(".portlet-content").height( height );
        $(".accordion").accordion("resize");
    }
});

Вы также можете использовать событие «stop» вместо «resize», если хотите, чтобы авторазмер происходил только после завершения операции изменения размера.

Answer 2

.portlet-header{ width:100%; height:25px;position:relative; }