Why is the dialog size so small with this GWT DockLayoutPanel?

Question

I've generated a new Web Application project using GWT 2.0.4. I replace the onModuleLoad() code with:

public void onModuleLoad() {
    DockLayoutPanel dp = new DockLayoutPanel(Unit.EM);
    dp.addNorth(new Button("north search"), 4);
    dp.addSouth(new Button("Search"), 4);
    dp.addWest(new Button("west"), 4);
    dp.addEast(new Button("east"), 4);

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

That produces what I think is the right thing; four buttons, one on each edge. But if I try to put that exact same thing into a DialogBox like this:

public void onModuleLoad() {
    DockLayoutPanel dp = new DockLayoutPanel(Unit.EM);
    dp.addNorth(new Button("north search"), 4);
    dp.addSouth(new Button("Search"), 4);
    dp.addWest(new Button("west"), 4);
    dp.addEast(new Button("east"), 4);

    DialogBox dlog = new DialogBox();
    dlog.add(dp);
    dlog.show();

}

What I get is a tiny little dialog box squished up in the right hand corner. The buttons are there but they're only a few pixels wide.

Why? What am I doing wrong? Shouldn't the dialog box have something very similar to the normal window?

Answer 1

RootLayoutPanel is specifically designed to wrap LayoutPanels and takes care of sizing etc. at least to a certain extent. If you want to wrap a LayoutPanel in a normal Widget, you need to set the size of the panel explicitly:

DockLayoutPanel dp = new DockLayoutPanel(Unit.EM);
    dp.addNorth(new Button("north search"), 4);
    dp.addSouth(new Button("Search"), 4);
    dp.addWest(new Button("west"), 4);
    dp.addEast(new Button("east"), 4);
    dp.setSize("20em", "20em");

    DialogBox dlog = new DialogBox();
    dlog.add(dp);
    dlog.show();

See whether that helps! Good luck!