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

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Nested layout margin issue

Tien Tran
1 decade ago Mar 09, 2010 1:55am
Jouni Koivuviita
1 decade ago Mar 09, 2010 10:06am

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.

Tien Tran
1 decade ago Jul 15, 2010 9:42am
Petr H
1 decade ago Sep 14, 2011 11:48am
Jouni Koivuviita
1 decade ago Sep 14, 2011 12:31pm
Steve Berube
9 years ago Aug 21, 2012 4:49pm
Jouni Koivuviita
9 years ago Aug 22, 2012 1:42pm
Steve Berube
9 years ago Aug 22, 2012 2:10pm