Margin/Padding Problem

General
1

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
Chris

2

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");
button.addStyleName("spacey-button");

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:

https://vaadin.com/api/com/vaadin/ui/Component.html#addStyleName(java.lang.String)

Cheers,
Bobby