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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
