How can I create a GWT layout which has a fixed header and footer that allows a scroll pane center to automatically size?

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!

Sorry the image is only a link, as a new user I can't post images — Jamie Street, Oct 18 '12 at 13:52
What's the problem with `DockLayoutPanel` to achieve this? It's the perfect fit. — Thomas Broyer, Oct 18 '12 at 13:55

score 1 · Accepted Answer · answered Oct 18 '12 at 14:06

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

answered Oct 18 '12 at 14:06

Chris Lercher

37,264
20
99
131

Thank you! I managed to fix it myself, was just a conflicting CSS rule I had added and forgotten about. I had a feeling it could be done in a similar fashion to your answer though, I'll have to give it a go! – Jamie Street Oct 18 '12 at 14:10

score 1 · Answer 2 · answered Oct 18 '12 at 23:58

1

Maybe it's a little bit off topic, BUT, I would suggest for you to use this if it is still not too late and if you have the freedom to choose a design: http://gwtbootstrap.github.com/ Twitter Bootstrap looks nice and it is easy to use, and the kind folks at gwt-bootstrap have ported it into GWT in a way that you can use it in a similar fashion to using standard GWT components. This thing has really simplified our design/layouting problems.

answered Oct 18 '12 at 23:58

Vladimir Prenner

227
2
4
13

I was planning on using that but I've been told by another team member it clashed with smartgwt's css on certain elements. I think I will use it though and just manually change any conflicts. Cheers for the suggestion nonetheless! – Jamie Street Oct 19 '12 at 09:06

How can I create a GWT layout which has a fixed header and footer that allows a scroll pane center to automatically size?

2 Answers2