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.