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:
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
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.
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.