setWidth vs css width


I’ve looked through the forum (10+ pages) and found one thread that was unanswered about this, so I’m hoping someone can help.

If I write java code:


everything works well. But if I try and put the width in css:


.menuLayout {
background: #486e92;

the component doesn’t get sized to 240px. Why is that?



You can’t define everything that you would like in CSS because Vaadin does a lot of size calculations by itself to support features like expand ratios, relative widths and margins, and support crossbrowser compatibility even for older browsers like IE6 and Fx2. If you look at the DOM (the source code of the html at a given point of the application usage), you’ll notice that Vaadin has added inline style attributes to pretty much every component which defines the height and width. Inline style attributes are stronger than css class attributes. Even if you override it by using the !important keyword, Vaadin will still only reserve as much space as the inline style says, and the component will thus overflow or not take the full space given to it.

Because of making the layouting so easy to use in Java, Vaadin has to restict a bit what you can do with CSS or else it won’t work. You should always define width’s and height’s in Java, and never use padding, margin or border in css if not the book of vaadin expliciely tell you that you can use it. For example layout margins can be adjusted by adjusting css padding to a special identifier, but not by adjusting margin directly to the element itself.

The only exception to this rule that I can think of right now is the CssLayout, which was created exactly for this reason… When ever you have to define something closely in css, wrap it into a CssLayout and style that one instead. For example in your case, you can put menuTreeLayout in a CssLayout, give setSizeFull() to the menuTree, and define the height and width to the CssLayout in css.


Hi Jens,

Thank you very much, that clears up everything I was wondering about!