Reducing the space between form-item

Flow
1

I created a formlayout to show the values like this.
image
Now the problem is, the space/gap is huge between each form-item. I looked into the Dev tools but not finding any margin/padding defining this space. How to provide custom gaps in this case?

2

You could try to set the following CSS custom property within the component “–vaadin-form-item-row-spacing”

You can do that either in your CSS file

vaadin-form-layout {
   --vaadin-form-item-row-spacing: 2px;
}

Or Java

layout.getElement().getStyle().set("--vaadin-form-item-row-spacing", "2px");

You may get more ideas for customizing from here

3

This already set to 0.
image
That’s what confusing me where this is getting those gaps/spaces.

4

Can I get some help on this ?

5

Thank you Tatu Lund.

Any idea about how to set the height between the rows?

6

You can copy the java class provided above (EnhancedFormLayout) by Tatu Lund, and then use it (EnhancedFormLayout) instead of FormLayout. In case of error about Label, change Label to Div.
Then you can use, for example setColSpacing(“10px”) to set the space.

7

I suggest adding a classname to your form like compact (formLayout.addClassName("compact"))
then add css:

vaadin-form-layout.compact vaadin-form-item::part(label) {
    margin-top: 0;
}

if you want a small margin, I suggest using
var(--lumo-space-s) or var(--lumo-space-xs), by default it’s var(--lumo-space-m)