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 Main  implements EntryPoint
{
    public void onModuleLoad()
    {
     HorizontalSplitPanel split = new HorizontalSplitPanel();
     //split.setSize("250px", "500px");
     split.setSplitPosition("30%");

     DecoratorPanel dp = new DecoratorPanel();
     dp.setWidget(split);

     RootPanel.get().add(dp);
    }

}

With the previous code snippet, nothing shows up. Is there a method call I am missing?

Thanks.

Answer 1

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 2

I put some buttons (explicitly set their size) on each side and that still doesn't work. I'm really surprised there isn't like a FillLayout class or a setFillLayout method or setDockStyle(DockStyle.Fill) or something like that. Maybe it's not possible? But for as popular as GWT is, I would think it would be possible.

Answer 3

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

Answer 4

I have tried setting the RootPanel width and height to 100% and that still didn't work. Thanks for the suggestion though, that seemed like it maybe was going to work. Any other suggestions??

Answer 5

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 6

Drejc,

Thanks for your response. I tried setting both the SplitPanel dimensions and the RootPanel dimensions to 100%. Still no luck. Thanks again.

Answer 7

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.

Answer 8

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 9

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);