1

I have a GWT application in which I'd like to use a PopupPanel to display a lot of information. I would like toe PopupPanel to take the rest of the screen (plus some padding), and for its contents to be scrollable.

If the amount of materials in the popup panel exceeds the space on the screen, the contents of the popup panel grow out of bounds, without scrollbars, and instead the primary windows' size increases (with scrollbars) to provide enough space for the popup.

My understanding is that the size of the PopupPanel depends on its contents.

What, then, is the simplest way to achieve this?

I have thought about placing a scrollpanel inside the PopupPanel, and settings its size to the available space at the time the popup is shown, but that seems like a hack.

Uri
  • 88,451
  • 51
  • 221
  • 321

1 Answers1

1

What do you mean with "the rest of the screen?" I assume, you mean "all the screen"?

Let's look at it from a CSS perspective. We will call the outer container C, and your PopupPanel P. P will be positioned absolutely within C.

When using an absolutely positioned element like P, the way I usually do it, is to set something like top: 1em; right: 1em; bottom: 1em; left: 1em, so it takes up all the space of C, but leaves a 1em margin (you can then also add padding). Alternatively, you can use top: 0; left: 0; width: 100%; height: 100%; margin: 1em;.

Then set overflow: auto; on P, and you will have scrolling.

Now the only problem is: What if your outer container doesn't have a fixed height (e.g. when you have a HTML document that scrolls vertically)? The answer is: You can always create a helper container: Use position: fixed;, and set top: 0; right: 0; bottom: 0; left: 0. Then add your PopupPanel as a child to that new container. (Or alternatively, it may be possible to use fixed positioning for the popup panel itself - if GWT allows that.)

Off the top of my head, I can't say how exactly to best achieve this with a GWT PopupPanel, but the principle should be the same, because GWT layout is strongly CSS based.

Chris Lercher
  • 37,264
  • 20
  • 99
  • 131