Form layout: vaadin-form-item-row-spacing does not work when items are not wrapped in FormItem

[MarekChr]

Description of the bug

Setting row spacing in FormLayout does not work. Wrapping items in FormItem is not pleasible, because of additional header added to element. Forum reference.

Expected behavior

Row spacing working as column spacing

Minimal reproducible example

setColumnSpacing(1.3f, Unit.CH);
setRowSpacing(1.3f, Unit.CH); // currently bugged in vaadin

Versions

• Vaadin / Flow version: 24.9.2
• Java version: 21
• OS version: Win 10 / Linux
• Browser version (if applicable): Firefox
• Application Server (if applicable): Tomcat

[jouni]

The problem is that the margin that should create the spacing is applied on <vaadin-form-item> and not any slotted element within <vaadin-form-layout>. This was fixed last week in the new base styles for Vaadin 25: vaadin/web-components#10291

The "auto-responsive" mode applies the spacing using the CSS gap property and not with margins, so it should already respect the --vaadin-form-layout-row-spacing property even when form item is not used.

[yuriy-fix]

@rolfsmeds , is there a workaround that could be applicable in 24.9?

[rolfsmeds]

So, setting row spacing has never actually worked without FormItem wrapping – it was only ever implemented for FormItem, but that was overlooked when the spacing API was added to the component's documentation a few months back, because it does work in the new autoResponsive mode.

This would be difficult to fix without causing breaking changes to existing FormLayouts in the wild.

There are 3 options for a workaround:

1. Switch to using autoResponsive mode.

2. Apply gap: var(--vaadin-form-layout-row-spacing) to the flexbox container inside the FormLayout. It needs to be injected into the FormLayout's shadow DOM by placing it in themes/<your-theme>/components/vaadin-form-layout.css:

#layout {
  gap: var(--vaadin-form-layout-row-spacing);
}

3. Apply it as padding to all fields in the FormLayout. This has the unfortunate side-effect of also applying that spacing above the first row of fields:

vaadin-form-layout > * {
    padding-top: var(--vaadin-form-layout-row-spacing);
}

[jouni]

This has the unfortunate side-effect of also applying that spacing above the first row of fields:

Just to note: that happens also when using Form Items. Well, with those you get half a row space above the first row of fields, and the other half after the last row.

[MarekChr]

@rolfsmeds Thanks for workarounds. Is 2. workaround file somehow loaded automatically by vaadin from themes/<your-theme>/components/ folder with matching component name overriding some default configuration/style?

[rolfsmeds]

Yes, the components folder is magical that way – it automatically loads stylesheets into the shadow DOM of any Vaadin component with a matching tagname.

[MarekChr]

@rolfsmeds I have another question about 2. workaround. My form layout is set to be 100% width, however setting gap with this workaround make items in this form layout not taking available space. No matter in what step I am currently in (3 columns, 2 columns or 1 column). Is there a way to prevent this?

example.mp4

[jouni]

Try changing to row-gap, as the gap property is setting both column and row gaps.

#layout {
  row-gap: var(--vaadin-form-layout-row-spacing);
}