GWT scroll bar over the all window - gwt

Question

I have a global presenter that contains a Header Footer and the main content slots, when header always on the top, footer always on the bottom...
My question is: How can i add scroll bar to my Global Presenter?
I know that there were a lot of questions like this but i cant find the right answer for me.
I have UiBinder that has the code:
<g:RootLayoutPanel width="100%" height="100%">
<g:layer left="0px" right="0px" top="0px" bottom="0px">
<g:DockLayoutPanel unit="EM">
<g:north size="5.0">
<g:HTMLPanel ui:field="headerContentPanel" />
</g:north>
<g:center size="1.0">
<g:FlowPanel ui:field="mainContentPanel" />
</g:center>
<g:south size="1.5">
<g:HTMLPanel ui:field="footerContentPanel" />
</g:south>
</g:DockLayoutPanel>
</g:layer>
</g:RootLayoutPanel>
I have tried to add ScrollPanel that is contains the RootLayotPanel or other panels.. but than all the inner panel receive size zero.
I have tried to use a vertical panel inside the scrollPanel but than I can't put the footer at the bottom.
Does someone has an answer?
==================================================================================
I succeeded to do it, here is my new code:
<g:RootLayoutPanel width="100%" height="100%">
<g:layer>
<g:ScrollPanel width="100%" height="100%">
<g:DockPanel width="100%" horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
<g:Dock direction="NORTH" >
<g:HTMLPanel ui:field="headerContentPanel" />
</g:Dock>
<g:Dock direction="CENTER" verticalAlignment="ALIGN_MIDDLE" horizontalAlignment="ALIGN_CENTER">
<g:FlowPanel ui:field="mainContentPanel" />
</g:Dock>
<g:Dock direction="SOUTH" verticalAlignment="ALIGN_BOTTOM" horizontalAlignment="ALIGN_CENTER">
<g:HTMLPanel ui:field="footerContentPanel" />
</g:Dock>
</g:DockPanel>
</g:ScrollPanel>
</g:layer>
</g:RootLayoutPanel>
But I have small problem: my footer isn't attached to bottom, no matter what i tried..
Does someone know the solution?

Answer 1

Layout Panels do not work properly in scroll panels. But scoll panels can be used in Layout Panels:
For example to scrolling the center part:
<g:DockLayoutPanel unit="EM">
<g:north size="5.0">
<g:HTMLPanel ui:field="headerContentPanel" />
</g:north>
<g:center size="1.0">
<g:ScrollPanel>
<g:FlowPanel ui:field="mainContentPanel" />
</g:ScrollPanel>
</g:center>
<g:south size="1.5">
<g:HTMLPanel ui:field="footerContentPanel" />
</g:south>
</g:DockLayoutPanel>
Another possibility is to use DockPanel instead Layout Panels.
If the header included in the scroll bar :
<g:ScrollPanel>
<g:DockPanel>
<g:Dock direction="NORTH" height="100px">
<g:HTMLPanel ui:field="headerContentPanel" />
</g:Dock>
<g:Dock direction="CENTER">
<g:FlowPanel ui:field="mainContentPanel" />
</g:Dock>
<g:Dock direction="SOUTH" height="100px">
<g:HTMLPanel ui:field="footerContentPanel" />
</g:Dock>
</g:DockPanel>
</g:ScrollPanel>
And then put this in RootLayoutPanel or RootPanel
Or use DockPanel in Layout Panels.
For example: we want to have scrollable header and center part, but west panel and bottom always in view:
<g:DockLayoutPanel width="100%">
<g:west size="100.0">
<g:Label>West side </g:Label>
</g:west>
<g:center>
<g:ScrollPanel>
<g:DockPanel>
<g:Dock direction="NORTH" height="100px">
<g:HTMLPanel ui:field="headerContentPanel" />
</g:Dock>
<g:Dock direction="CENTER">
<g:FlowPanel ui:field="mainContentPanel" />
</g:Dock>
</g:DockPanel>
</g:ScrollPanel>
</g:center>
<g:south size="50">
<g:HTMLPanel ui:field="footerContentPanel" />
</g:south >
</g:DockLayoutPanel>
And then put this in RootLayoutPanel.

Answer 2

Forget all the GWT (UiBinder) syntax and all the cascaded layout for a moment. Just consider this simplified example:
We have a window, let's say with a current height of 1000px.
We have a container (just imagine a simple black box) that takes up 100% of the window height - so it has 1000px height.
In this case, there is nothing to scroll. So with scroll=auto there will be no scroll bar on the window. (Forget any possible scroll bars inside our black box.)
If you want a layout where the header stays on top, while everything else scrolls (with a scrollbar that takes up 100% height), you should probably start with a header with "position=fixed". So what you would do in HTML is this:
<div class="headerContent">My header</div>
<div class="everythingElse">
<div class="mainContent">...</div>
<div class="footerContent">My footer</div>
</div>
CSS:
.headerContent {
position: fixed;
top: 0;
left: 0;
height: 5.0em;
width: 100%;
background-color: red;
}
.everythingElse {
margin-top: 5.0em; /* Same as the height of the header */
}
You can do the same in GWT UiBinder. Just replace the divs with simple FlowPanels (if you like), and apply the css (with a UiBinder CSS class referenced using the addStyleNames attribute). No DockPanels needed. When the height of "everythingElse" exceeds the window height, the default setup of the body tag shows the scroll bar.