CSS VerticalLayout margin

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I have a problem with the setting of margin in css for vertical layout.
My code below:

VerticalLayout vLayout=new VerticalLayout();
vLayout.addStyleName(“vlayout-style”);
setCompositionRoot(vLayout);

In my css:
.vlayout-style .v-verticallayout-margin
{
padding-left: 10px;
padding-right: 10px;
}

It works but it affects all the vertivallayout…

How to define in the css to have margin only for a specific vertical layout?
Thanks

Regards

Fred

2

See
the chapter about layout margins in the Book of Vaadin
.
Update: fixed link.

3

Thanks for the reply.

But could you tell me what is wrong in my example. I think I followed the instructions from the the chapter about layout margins in the Book of Vaadin.
I normally defined the margin rules only for the layout with style “vlayout-style” but it looks the margin rules are applied for all the vertival layout of my web application…

Thanks

Regards

Fred

4

Hi,

After several test, I found the cause. If you define margins for a layout, all the child layouts will have the margins. I think it comes from the css rules.

So I used setMargin() method to remove the margins for the child layouts.

Fred

5

Oh, sorry, read your post too hastily.

Yes, the current margin implementation is “dump” in the way that it will cascade to inner layouts as well. You can prevent this by using the CSS child selector “>”, but that won’t work in IE6.

Hopefully we’ll fix this in Vaadin 7.

For more flexible and understandable way to style layouts, try the
DashLayout add-on from the Directory
.