Re: problems using ScrollPanel and layout panels

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

 

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/08w2GU4yauYJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.