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.