Creating a fluid panel in GWT to fill the page?

Question

I would like a panel in GWT to fill the page without actually having to set the size. Is there a way to do this? Currently I have the following:

public class M         


        

Answer 1

Google has answered the main part of your question in one of their FAQs: http://code.google.com/webtoolkit/doc/1.6/FAQ_UI.html#How_do_I_create_an_app_that_fills_the_page_vertically_when_the_b

The primary point is that you can't set height to 100%, you must do something like this:

final VerticalPanel vp = new VerticalPanel();
vp.add(mainPanel);
vp.setWidth("100%");
vp.setHeight(Window.getClientHeight() + "px");
Window.addResizeHandler(new ResizeHandler() {

  public void onResize(ResizeEvent event) {
    int height = event.getHeight();
    vp.setHeight(height + "px");
  }
});
RootPanel.get().add(vp);

Answer 2

Panels automatically resize to the smallest visible width. So you must resize every panel you add to the RootPanel to 100% including your SplitPanel. The RootPanel itself does not need resizing. So try:

split.setWidth("100%");
split.setHeight("100%");

Answer 3

Try setting the width and/or height of the rootpanel to 100% before adding your widget.

Answer 4

The problem is that DecoratorPanel middleCenter cell will fill tight on your contents as default, and SplitPanel doesn't allow "100%" style size setting. To do what you want, set the table's style appropriately, on your CSS:

.gwt-DecoratorPanel .middleCenter { height: 100%; width: 100%; }

Answer 5

I think you'll need to put something on the left and/or right of the split (split.setLeftWidget(widget), split.setRightWidget(widget) OR split.add(widget), which will add first to the left, then to the right) in order for anything to show up.

Answer 6

The documentation for DecoratorPanel says:

If you set the width or height of the DecoratorPanel, you need to set the height and width of the middleCenter cell to 100% so that the middleCenter cell takes up all of the available space. If you do not set the width and height of the DecoratorPanel, it will wrap its contents tightly.