калитка: как сделать высоту div зависимой от другого div

Question

Я - беженец GWT, пытающийся выяснить, как делать различные вещи Ajax-иша в Wicket.

У меня есть два деления. Я бы хотел, чтобы первый div в max-height зависел от высоты второго div, со ссылкой «больше / меньше», чтобы пользователь мог расширить первый div.

Пример:

Содержимое обоих div'ов является переменным, и, поскольку div2 обернул текст пропорциональным шрифтом, я не могу предсказать его высоту, пока он не будет отображен в браузере.

В GWT я выполнил это, добавляя содержимое к строке div1 по очереди, и, если оно превышало высоту div2 (в котором уже отображалось содержимое), я просто удалял строку. Поскольку GWT работает на клиенте, это довольно просто.

Какой лучший способ сделать это в Wicket? Я ожидаю, что понадобится немного Javascript, но если есть компонент, который уже делает это (или делает его проще), я был бы очень рад его использовать.

Answer 1

С помощью чистой калитки я не думаю, что есть способ сделать это. Но, возможно, подход Wicket + JQuery поможет вам реализовать вашу идею ...

Answer 2

Кажется, есть довольно простое решение JavaScript (за исключением того, что оно не решает проблему показа наполовину строки, но я думаю, что это можно решить, играя с этим:

document.getElementById("div1").style.height = document.getElementById("div2").offsetHeight;

Answer 3

Вы можете сделать оба полностью открытыми (чтобы улучшить доступ для пользователей, не являющихся js), а затем ограничить высоту Div 1 до высоты Div 2.

Итак (с помощью jQuery) ...

CSS

#div1 { overflow: hidden; }

Javascript

$(document).ready(function() {
  var div2_height = $('#div2').height();

  $('#div1').height(div2_height);
});

Чтобы учесть нарезку на строке, протестируйте высоту строки и задайте высоту, кратную.

Answer 4

Разве это не может быть решено почти полностью с помощью CSS? Как добавить оба DIV в третий DIV с атрибутом overflow: hidden, вырезать содержимое второго DIV и увеличить высоту обтекания DIV с помощью JavaScript? Возможно, вам придется изменить DIV1 на встроенную обработку, чтобы он не «выдвигал» нижнюю границу контейнера или что-то вроде этого ... Просто как указатель, не пробовал, не могу попробовать прямо сейчас и не уверен, работает ли он, но я думаю, что должен. В любом случае, вам или мне, кому-то придется поиграться с этим, чтобы узнать ...

Надеюсь, это немного поможет.