Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Nested layout margin issue
Hi,
Does anyone have an idea of setting margin for the parent layout without affecting the decendants?
I am having two VerticalLayout nested and have their margin turned on (setMargine(true)). Let's call them outer and inner.
Below are css code used to set different margin for the outer and leave the inner with default values:
.v-verticallayout-outer .v-verticallayout-margin-left {padding-left:5px}
Unfortunately, the css also set the left margin of inner layout to 5px. Is there a way to avoid this using CSS only?
Thanks,
Tien
Hi Tien,
Finally someone stumbled upon this nasty issue with the layouts. I bet others have had problems as well, but you've been brave enough to ask for a workaround :)
The CSS for the margins is a bit badly designed, but you can workaround these issue most of the time. The obvious way is to reset the margin size for all the contained layouts, like so:
.v-verticallayout-outer .v-verticallayout .v-verticallayout-margin-left {padding-left: 18px}
You of course need to know the exact value to reset it to, and that depends on the theme you're using. The defaults are 18px (all sides) for Reindeer and 15px (vertical) by 18px (horizontal) for Runo.
I try to improve this situation in version 7, making layout styling much easier than it is currently. All ideas and opinions are welcome!
PS. check out my DashLayout component that makes layout styling easier right away.
Thanks heaps, that works. But yeah, it is definitely ugly. Can we expect the future releases support setting css styles to the specified component (without inheritance)?
Hi,
I have also encountered this problem, so I have studied the client implementation and found this solution:
.my-layout > div > div > div.v-horizontallayout-margin {
padding: 16px 13px 13px 0;
}
.my-layout > div > div > div.v-horizontallayout-spacing-on {
padding-left: 13px;
}
This solution does not affect the decendant layouts. Of course it would not work in IE6, but we do not support this browser anymore ;-)
But I have a question - you wrote that you want to fix this issue in Vaadin 7, so is it possible that you will change the implementation and my solution won't work? :unsure:
Thank you for your reply.
Petr
Petr H: But I have a question - you wrote that you want to fix this issue in Vaadin 7, so is it possible that you will change the implementation and my solution won't work? :unsure:
I'd say it's more than possible. I suspect that theme migration from v.6 to v.7 will be a custom process in any case, depending on the amount of customization you've done in your theme. But I would also suspect that we write some sort of migration guide that will greatly help the migration process, so you know what to fix and how to do it.
As a disclaimer, this stuff is only my opinion, and actual plans are (still) in early stages. So if you have strong opinions about these things, feel free to voice them.
Does anyone know if vaadin 7 will support this:
.my-layout-margin {
}
e.g. addStylename"my-layout"
instead of needing this (very nicely working) workaround?
Hi,
In Vaadin 7, you can use the style name directly to control the margin/padding. There's no longer any magic happening in this part, it's just plain CSS that is applied directly to the element.
// Java
VerticalLayout layout = new VerticalLayout();
layout.addStyleName("foo");
//CSS
.foo {
padding-top: 10px;
padding-bottom: 20px;
}