I’ve been using Vaadin for about three months now. It was pretty hard to comprehend the behaviour of the framework at first but as time has gone by I’ve gotten a grip on most components and features in the framework and what their capabilities are.
However, one problem that I can’t seem to get rid off is taming the generated div’s that appear as a product from using VerticalLayouts in your application view.
These components always seem to screw things up for me and it can take hours and a lot of headache before I get things as I want. And usually, the solution for me is swapping the VerticalLayout for a CssLayout. Which leads me to my question/discussion…
What exactly is the purpose of using a VerticalLayout in oppose to a CssLayout?
Which benefits are there to use a VerticalLayout. All I’ve seen so far is trouble. Inner div’s being generated with incompatible width’s and a wrapper/shell that has overflow: hidden; causing layouts to have their rightmost border cut off.
I would really like to hear from some of the more experienced Vaadin users (newbies like myself are of course also welcome to post their opinion!) if you from your experience could enact a concrete example of when a VerticalLayout is essential.
Btw, I have probably just had a rough start with the VeerticalLayout component and this in no way me arguing that it would be redundant! So don’t get the wrong idea… =)
We seem to struggle with layouts, too, often having conflicting issues with wanting layouts to support 100% width and height, but still have scrollbars when the content doesn’t fit. We suffer a lot with layouts that simply clip the view, especially when the browser is not maximized or on a smaller screen. I know this confuses a lot of users. To me, it seems that any layout in a Panel or Window should not clip by default.
Most of the Vaadin layouts are meant to be used and customized from Java code on the server side, by people who are not experts in CSS and indeed might know nothing about it - size settings etc. should be done there, and only there. This applies to VerticalLayout, HorizontalLayout, GridLayout etc. You can do a lot of layouting in Vaadin with these layouts and some Panels to control scrolling etc. but for that you need to think and work in terms of their features and not so much CSS.
If you come more from the web development side and want to customize e.g. overflow settings in CSS or think about individual divs, you would only be fighting against how most of the default layouts work. In that case,you are probably better off with CssLayout or CustomLayout or one of the more CSS-friendly layout add-ons from the directory.
Note that the plans for Vaadin 7 include changes that would make many of the standard layouts more CSS-friendly and efficient. However, those changes require dropping support for IE6 & IE7, so they cannot be done before Vaadin 7.
Purely feature-wise, VerticalLayout supports expand ratios, allowing you to occupy unused space by non-relative sized components in the layout. Another feature missing from CssLayout is component spacing (setSpacing(true)), but that can quite easily be mimicked with additional CSS.
I really see where you’re coming from. I’ve sketched up about five templates myself each time I’ve managed to sort out a layout problem, so that I would have something to go on the next time I face the same problem. Unfortunately it seems like the slightest changes in a new layout may result in a very different syntax to make it work… =\
Hi Henri! And thank you for a great answer!
I actually think a big part of my problem is that my knowledge in web development and CSS is quite limited. That is at least how I’ve portrait it for myself. I just feel totally baffled sometimes over how my implementation is interpreted. Getting stuck on the smallest things, like scrollbars appearing when there shouldn’t be any or inner layouts having parts cut off (which both I assume spring from the same problem). Yet you point out that there shouldn’t be any problem managing layouts without having much or any web development experience…
I guess I really just have to give it more time. Problems usually don’t have to take as much time to sort out as they did in the beginning, so I guess I’m managing that better. I just wish I knew right off the bat how to implement and arrange my layouts to get things as I wanted when I create a new view.
Since I want to use expand ratio for my toolbar I ended up using horizontal layout instead of css layout.
Can anyone tell how to add menubar styles to my horizontal layout.