Как я могу заставить GWT PopupPanel не превышать доступное пространство на экране и иметь прокручиваемое содержимое?

У меня есть приложение GWT, в котором я хотел бы использовать PopupPanel для отображения большого количества информации. Я хотел бы, чтобы PopupPanel занимал остальную часть экрана (плюс некоторые отступы) и чтобы его содержимое можно было прокручивать.

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

Насколько я понимаю, размер PopupPanel зависит от его содержимого.

Как же тогда проще всего этого добиться?

Я думал о размещении панели прокрутки внутри PopupPanel и настройке ее размера на доступное пространство во время отображения всплывающего окна, но это похоже на взлом.


gwt popuppanel
person Uri    schedule 08.09.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Что вы имеете в виду под "остальной частью экрана"? Я полагаю, вы имеете в виду «весь экран»?

Давайте посмотрим на это с точки зрения CSS. Мы назовем внешний контейнер C, а вашу панель PopupPanel P. P будет расположен абсолютно внутри C.

При использовании абсолютно позиционированного элемента, такого как P, как я обычно это делаю, я устанавливаю что-то вроде top: 1em; right: 1em; bottom: 1em; left: 1em, поэтому он занимает все пространство C, но оставляет поле в 1em (затем вы также можете добавить отступ). Кроме того, вы можете использовать top: 0; left: 0; width: 100%; height: 100%; margin: 1em;.

Затем установите overflow: auto; на P, и у вас будет прокрутка.

Теперь единственная проблема: что, если ваш внешний контейнер не имеет фиксированной высоты (например, когда у вас есть HTML-документ, который прокручивается по вертикали)? Ответ таков: вы всегда можете создать вспомогательный контейнер: используйте position: fixed; и установите top: 0; right: 0; bottom: 0; left: 0. Затем добавьте свой PopupPanel в качестве дочернего элемента в этот новый контейнер. (Или, в качестве альтернативы, можно использовать фиксированное позиционирование для самой всплывающей панели — если GWT это позволяет.)

Навскидку я не могу сказать, как именно лучше всего добиться этого с помощью GWT PopupPanel, но принцип должен быть таким же, потому что макет GWT сильно основан на CSS.

person Chris Lercher    schedule 09.09.2011