problems using ScrollPanel and layout panels

[Ioan Agopian]

Hi all,

I have the following code:

<g:DockLayoutPanel unit='PX' ui:field="dockPanel">
<g:north size='35'>
<g:HTMLPanel>
Header
</g:HTMLPanel>
</g:north>

<g:center>
<g:ScrollPanel width = "100%" height = "100%">
<p1:CellTree ui:field="cellTree"/>
</g:ScrollPanel>
</g:center>
</g:DockLayoutPanel>

This DockLayoutPanel is in turn attached to other layout panel who is
attached to the root layout panel.

The behavior that I want is that when the user starts opening nodes in
the tree and the cell tree grows bigger than the panel that contains
it, a scroll bar will appear and the user can scroll and see all the
nodes.

The scroll bar never appears though. After searching on the net I
found that I have to set the height is absolute units for the scroll
panel. But how can I set it with absolute units, when I want the panel
to fill the whole area, and I don't know how big the browser window
will be?

I guess there must be a simple solution to this, but I can't find
it...

Any ideas?

Thanks,
Ioan

[Williame]

I feel your pain.  I've spent hours trying to make my center docklayoutpanel scrollable while at the same time make it replacable by new widgets based on menu choices.  Most things worked fine by putting a Scrollpanel in the center block, except TabLayoutPanel put a few level inside it would never show the tab headers.  I found that ResizeLayoutPanel can help.  Hope it never gets deprecated.

 

You can use Window.getClientWidth() and Window.getclientHeight() to get the visible window size in pixel, then subtract the size of the other screen elements.  But this did not resize well for me and I did not want to write a lot of code to handle and propagate onResize.

 

In the end I went with an html panel for my main outer interface, so I could use simple div elements for the top(north) elements, and used a ResizeLayoutPanel for the placeholder for content.  In the java side of the uibinder code I put in a call to a ResizeLayoutPanel size adjustment after clearing and placing new panels into the ResizeLayoutPanel widget.

 

 
<g:HTMLPanel styleName="{style.mainPanel}">
<div class="{style.header}">My Company name</div>

<div ...............................

<!-- content widget placeholder -->
<g:ResizeLayoutPanel ui:field="uberContent" title="Content" styleName="{style.appcontent}" height="384px" width="681px"/>

</g:HTMLPanel>

In the code to replace the content widget with a different widget, the panel size of the new widget can be used to resize the placeholder widget if the new panel is a fixed size layout panel.  If it is not, you need to explicitly specify the size of the new panel:

 

uberContent.clear()

MyPanel panel = new MyPanel();

uberContent.add(panel);

adjustContent(panel.getOffsetHeight(),panel.getOffsetWidth());

 

 

In adjustContent(int height, int width) method, reset placeholder widget size to just a little bigger than the new panel added to it:

 

uberContent.setHeight(height + 50 + "px");

uberContent.setWidth(width + 20 + "px");

The css for the placeholder widget, uberContent, sets margin-bottom to keep the panel below the header div's.  The scrolling seems to work like a normal web app, resizes work pretty well too.  Tested with latest of each: IE, firefox, chrome, safari and opera.  Even iPad(safari).  The overflow css attribute seems to wreak havok on layout panels, especially tablayoutpanel.  I have it set to "overflow: scroll;" for the style.mainpanel, outer htmlpanel.  But not set at all for the ResizeLayoutPanel style.  DockLayoutpanel sets overflow: hidden by design.

 

I wouldn't be surprised if there are several better, more elegant solutions, which I would love to know of, but this worked for me.  Hope it helps.

<Discalimer> I am neither java, css or gwt expert.  But do love gwt.  Thank you Google!! </Disclaimer>

-William

 

[Ioan Agopian]

Williame, thanks for your response, I really hope we can find an
elegant solution.

I don't think that your approach works well for dynamic content. I
don't really know the size of the cell tree in advance so I can't
adjust the size of the containing panel when placing the cell tree in
it.

At first, I used like you a HtmlPanel as my main container, and I had
outside scrolling working fine, but I had to switch from it when I
started to use a SplitLayoutPanel for one of my views, because the
split panel worked only when specifying the exact height for it, I
couldn't get it to work with a height of 100%.

So I switched to using RootLayoutPanel and converted all my outer
panels to layout panels and the SplitLayoutPanel started to work
correctly (not surprisingly, as the documentation for layout panels
clearly says that you have to attach them only to other layout
panels). Having solved that I bumped into this inner scrolling
problem.

From the layout panels documentation:

ScrollPanel... works well in layout panels (see below), which provide
it with the explicit size it needs to scroll properly.

And below we have this example:

<g:DockLayoutPanel unit='EM'>
<g:north size='4'>
<g:Label>Header</g:Label>
</g:north>

<g:west size='16'>
<g:Label>Navigation</g:Label>
</g:west>

<g:center>
<g:ScrollPanel>
<g:Label>Content Area</g:Label>

</g:ScrollPanel>
</g:center>
</g:DockLayoutPanel>

Which is like my code, except they use static content for the scroll
panel.

I suppose an elegant solution must exist, because almost all web apps
will use dynamic content.