Monday, July 25, 2011

GWT DocLayoutPanel scrolls problem

I was creating a web application using GWT. My base panel is a RootLayoutPanel and I added on it a DockLayoutPanel on which I attached my components.
I came across a problem when changing browser window size to smaller than panel size. The panel size remained unchanged but part of it which was exceeding window size was not visible and there were no scroll bars for browser window.

I struggled with this annoying problem trying to put the DocLayoutPanel inside ScrollPanel, but it did not help at all.
Finally, i found a work around on GWT tutorial at:
http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Resize

I've added to my root html page a tag like:



<body>
    ..
    <div id="main" ></div>
    ..
</body>


then in onModuleLoad method instead of adding the panel like:



interface Binder extends UiBinder { }
private static final Binder binder = GWT.create(Binder.class);

public void onModuleLoad() {
    DockLayoutPanel outer = binder.createAndBindUi();
    RootLayoutPanel.get().add(outer);
}



I do it that way:



public void onModuleLoad() {
    DockLayoutPanel outer = binder.createAndBindUi();
    LayoutPanel panel = new LayoutPanel();
    panel.add(outer);
    RootPanel.get("main").add(panel);
    panel.setSize("800px", "800px");
}



NOTE that you must set explicitly the size of the panel to properly display on web page. You should have now scrolls as on any other web page when the panel size exceeds window size.