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

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

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;
}

So happy to hear this:) Thank you!