Re: Understanding the Layout System

I have content that goes under the TabPanel. (a StackLayoutPanel actually), so a scroll bar inside does not solve an issue like that. 

My question isn't necessarily aimed to solve that particular problem, but to understand the way the LayoutPanels are suppose to be used to create an app. The very basic examples that the documentation provides, and the fix you provided here does not really translate into how you'd develop an entire web app using these techniques. Am I only suppose to use LayoutPanels when I want to fill the screen and have no overflow? Am I stuck using the old bunch-o-tables widgets (or writing my own) otherwise? Supposedly these old widgets don't play well in standards mode, so it'd be nice to get away from them.

I guess your FlexBox suggestion at least solves the issue of building a proper layout, but if I forgo LayoutPanels altogether, I'm stuck with the "bad" old widgets and panels. Granted, I don't suppose I have to be 100% reliant on GWT to hand-feed me everything I need. It just feels like I'm missing critical components of the LayoutPanel that would allow it to work the way I want.

On Monday, December 21, 2015 at 1:24:25 PM UTC-5, Jens wrote:

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.