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

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

1 голос
/ 09 сентября 2011

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

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

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

Какой же самый простой способ для достижения этой цели?

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

1 Ответ

1 голос
/ 09 сентября 2011

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

Давайте посмотрим на это с точки зрения 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 позволяет это.)

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

...