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

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

So happy to hear this:) Thank you!