Basically ScrollPanel has an internal div element (the "scollable" element) that does not have any height. That is generally fine because the scrollable area should adapt to the size of its single child but that also means you can not use "height:100%" for the child (percentages require height on the parent). But if you further think about it, that is totally fine as well, because if you want to put a TabLayoutPanel inside a ScrollPanel then IMHO you have done it wrong. What you really want to do is to put a ScrollPanel as tab content into a TabLayoutPanel and that TabLayoutPanel fills the content area of your app.
So instead of a global DockLayoutPanel:center -> ScrollPanel for your content area what you really want is DockLayoutPanel:center -> SimpleLayoutPanel. If you have a screen/page/content that is based on a TabLayoutPanel you can put that TabLayoutPanel into the SimpleLayoutPanel and the ScrollPanel into the tab content. For other screens you can put a ScrollPanel into the SimpleLayoutPanel directly.
However if you do not support really old IE browsers then there is really no need to use LayoutPanels at all. I would always go straight CSS with either absolute/fixed positioning or, if you only support IE 10+, with the new FlexBox layout system. LayoutPanels create a bunch of div elements that IMHO are literally useless. Also they are kind of slow on window resize as they propagate the resize event to all children who might execute code. So browser resizing can become choppy.
Using FlexBox is a bit complicated at first, especially because you need some GSS mixins to handle all the different syntax styles efficiently. However once you understand it and have your mixins in place, its really a game changer for layout. This should have been part of CSS since day one. Of course there are some bugs in browsers for this layout system but most stuff just works and an app structure as you have described is really easy to create.
If you have never heard of FlexBox before, here is an example: https://jsfiddle.net/d3113zo9/ (only tested in newest Chrome, Firefox, Safari). The nice thing about that example is that header, sidebar and footer do not have explicit sizes. They adapt to their content. Just type in more text for the sidebar and it becomes wider. Add more lines to the header and it becomes taller. Of course you could still give them explicit sizes if desired.
-- J.
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.
No comments:
Post a Comment