Margin/Padding Problem

Hello everyone,

I have a problem using the vertical-layout.

In my example I am using a vertical-layout with some elemnts in it (textfield, select-lists, …). Now I know how to set the padding of the vertical-layout by using a style like this:

.myclass .v-verticallayout-margin {
padding: xxx px;

But how can I set a margin to specific elements IN the verticallayout? Lets say some get a margin and some other not. Hope anyone can help me…

I first got the idea of putting vertical/horizontal layouts around these elements, just to use the method from above. But this would cause the problem, that EVERY element wrapped by a horizontal/vertical layout would get this margin. Isn’t there a way to only apply it to elements by using a classname?

Thank you

You can add a style name to any element, and then style that one individually in your css file. For instance:

Button button = new Button("I need space");

Then in your css file:

.spacey-button {
    margin-top: 20em;

There is also a setStyleName() method, but the ‘add’ one is preferred since it doesn’t overwrite existing styles: