Question

I have a design in mind which I’m struggling to convert to a GWT layout.

Basically I need a header and footer which have a fixed pixel height and full browser width, the snag is they must both always be visible to the user.

I’ve been playing around with the DockLayoutPanel with north and south panels and then adding a scroll panel to the center, this works great when I use Unit.PCT but I need to fix the north and south panels so that they are always a set height in pixels but still allow the center scroll panel to automatically fill the gap between the two.

A picture is worth a thousand words so I drafted up this quickly:

draft design

If you have any ideas how this could be solved I’d be very grateful to hear from you!

Answer 1

final DockLayoutPanel dPanel = new DockLayoutPanel(Unit.PX);

dPanel.addNorth(new FlowPanel(), 48);
dPanel.addSouth(new FlowPanel(), 48);

final Panel centerPanel = new FlowPanel();

for (int i = 0; i < 100; i ++)
  centerPanel.add(new Label("Lorem ipsum"));

dPanel.add(new ScrollPanel(centerPanel));

RootLayoutPanel.get().add(dPanel);