Как заставить GWT PopupPanel не превышать доступное пространство экрана и иметь прокручиваемое содержимое?
У меня есть приложение GWT, в котором я хотел бы использовать PopupPanel для отображения большого количества информации. Я бы хотел, чтобы PopupPanel занимал оставшуюся часть экрана (плюс некоторые отступы) и чтобы его содержимое можно было прокручивать.
Если количество материалов во всплывающей панели превышает пространство на экране, содержимое всплывающей панели вырастает за пределы, без полос прокрутки, и вместо этого увеличивается размер основных окон (с полосами прокрутки), чтобы обеспечить достаточно места для всплывающего окна.
Насколько я понимаю, размер PopupPanel зависит от его содержимого.
Каков же самый простой способ достичь этого?
Я думал о размещении панели прокрутки внутри PopupPanel и установке ее размера в соответствии с доступным пространством во время показа всплывающего окна, но это похоже на хак.
1 ответ
Что вы имеете в виду под "остальной частью экрана"? Я полагаю, вы имеете в виду "весь экран"?
Давайте посмотрим на это с точки зрения 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.