Why does vaadin add some fixed width/height?

Even though I specify width/heights in %, for some reason vaadin changes them to specific sizes. I see this via firebug.This is messing up my layout and making it very hard to do any kind of desired layout.

Is there are way to force vaadin to use percentages instead of converting them to fixed units?

In general I find Vaadin’s layout technique very hard for constructing fluid layouts. I have been trying to center a form inside a two column GridLayout, inside a portlet, for hours and have been unsuccessful. Vaadin is adding some extra divs with fixed widths which is not centering my form. Using pure HTML I can do the same very easily with margin-left:auto and margin-right:auto.
Is there any plan to revamp the layout technique to be easier/similar to HTML/CSS type fluid layout, in the future?

Some features of the layouts (VerticalLayout, HorizontalLayout and GridLayout) cannot be supported on all browsers without doing these layout calculations.

If you want a lightweight layout where you can do these kinds of tricks, try the CssLayout.

You could also take a look at the layouts available in the directory (

For most of the core layouts (at least Vertical, Horizontal, Grid and FormLayout), no, not at the moment.

The reason for the conversion is that the feature sets in our layouts are quite sophisticated, and thus hard to support easily in a cross-browser fashion. Converting everything into pixels makes the layouts work consistently across the supported browsers, but that comes with a price, of course. And the price is loss of performance and loss of flexibility to make further customizations using CSS.

The layout system was designed to be flexible and usable to non-HTML/CSS experts. People coming from heavy Java-background should be able to build complex layouts using the current implementation. At least that’s the main goal.

We of course do see the need to support HTML/CSS style layouting as well, but that part is currently in a more undeveloped state. Your best bets on that area is to use either CssLayout of CustomLayout, which allow you to use CSS more freely to define the layout. The contained components will still have their sizes converted to pixels, though.

To address your current need, centering a form inside a gridlayout, that should be fairly easy.

gridLayout.setComponentAlignment(form, Alignment.TOP_CENTER);

Just make sure the form is not 100% wide (call
), and it should get centered inside its containing grid cell.

I do have major plans on the layout department for version 7, but I haven’t found the time to write them down in the wiki for everyone to see. Hope to do that before the end of this year. But the sizing and usage of CSS to define the layouts are a pain in my ass, as well, in most of the projects I’ve been working on :slight_smile: so don’t lose hope just yet.