Vertical spacing in FormLayout

Flow
1

Hi Forum

Trying to find the best way to use a standard layout with labels to the left of fields, I found that the FormLayout suits my needs the best. However, not being quite satisfied with the default vertical spacing in the FormLayout, I tried to change this in the stylesheets. In the Book of Vaadin it is noted, that the FormLayout should follow the conventions for vertical spacing as in:

.v-vertical > .v-spacing { height: [some pixels here] px; } However, trying to put this into the correct section of the scss-file has no effect. I tried the same for a vvertical layout, and here it works fine.

The only way that I could make this work, was actually by taking the style-codes from the basic theme-file and put it into the project SCSS (same place as above shown snippet), as in:

.v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-captioncell,
    .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-contentcell,
    .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-errorcell {
            padding-top: [some pixes here]
px;
    }

This works perfectly well, and allows me to set the spacing as needed, but is this the correct way ?

Best regards and TIA.

2

Thanks Niels.
It works for me but slightly modified.

FormLayout form= new FormLayout();
form.addStyleName(“padding-top-4”);

//app.scss

.padding-top-4 > .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-contentcell,
.padding-top-4 > .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-errorcell{
padding-top: 4px;
}

3

You might need to add the captioncell to this

.padding-top-4 > .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-captioncell,
.padding-top-4 > .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-contentcell,
.padding-top-4 > .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-errorcell{
padding-top: 4px; padding-bottom: 4px;
}