How to create additional spacing around form elements?

Dear all,

I would like to add some spacing around the form elements (including the bottom button). So I thought that this CSS code will do the job:

.v-form {
	padding: 10px;

Unfortunately, it causes the scroll bars to appear. I also tried this:


but the buttons are still at the edge. What one can advise?

Hmm, that’s indeed a problem. The padding will fail, since the size calculation of the component does not take the padding into account, so the 100% size will be too big (100% + padding > 100%).

Setting the margin should work, but since the buttons reside outside the FormLayout that’s inside the Form component, they’re not affected (this could be considered a bug, but I’m not saying it is ;)).

I guess your best option currently is to wrap one additional CssLayout around the form, and set the margin on that (and remember to set the CssLayout width to 100%).

, you are absolutely right: it is really a challenge, since Vaadin defines a fixed sizes for all HTML elements on all levels of nesting. This it does not matter, if you set CSS padding or margin: the embedded element will stretch the parent, as has a fixed width (thus causing the scrollbar to appear).

Indeed, you advice to wrap a form into
worked as a charm! But how Vaadin knows the CSS settings of the box? I mean these very setings I’ve put to

.v-csslayout-margin {
padding-left: 10px;
padding-bottom: 10px;

[/code]The browser should somehow communicate this back to Vaadin. Or Vaadin also parses the theme CSS file?

In any case, I think, Vaadin can capture the box layout information for any element (form, table, etc), so there is no need for
. Were am I wrong?

CssLayout works in a bit different fashion (more simple) than other core layouts. The root element of the CssLayout is only calculated, and you can’t add padding or margin for that. But the two inner DIV’s are a bit different, since they are never assigned an explicit width/height, so you can add padding to them (and the natural size of a DIV element is 100% - padding - margin).

So nothing needs to be communicated back to Vaadin client, it’s all default browser behavior. And Vaadin does not parse CSS itself, it only measures some properties during rendering for the pixel calculations, such as core layout margin sizes (minus CssLayout).

Oh, yes. I got it! If
is applied, then all nested elements are assigned the minimal width and no height. Is there any reason why it is not a default behaviour? It would be then easier to apply custom CSS with less fear that something will be broken.