How to set vaadin-form-layout row spacing?

I would like to increase spacing between ROWS, not columns, thanks.

The documentation for this is really hard to find (as it is for vaadin-form-item, not for vaadin-form-layout), but there is a CSS custom property you can use: --vaadin-form-item-row-spacing.

Hello, I tested that already and it does not work. I looked into the styles in the sahdow root and it appears to me that the value of the --vaadin-form-item-row-spacing is hard-coded there

Yeah, it’s unfortunate that the value is set on the host of vaadin-form-layout, so you can’t override it on the global level.

But you can override it for all form layouts like this:

vaadin-form-layout {
  --vaadin-form-item-row-spacing: 100px;

where would i put that code?

in styles.css?

or in the components/vaadin-form-layout.css


That does not work

If you want to put it in components/vaadin-form-layout.css, then you need to write it like this

:host {
  --vaadin-form-item-row-spacing: 100px;

yes, i guess host form could work, but that styles.css variant does not work, i tested now

If it doesn’t work from styles.css, then the element is likely inside some shadow root, and not in the document light dom.

yes, it is, shadow root with hardcoded --vaadin-form-item-row-spacing

because it is ahardcoded i am afraid that maybe even the :host variant wont work…

No, I meant that you have a web component (perhaps a LitElement) with shadow DOM in your app, where you render your form layout. Then the global styles.css selectors won’t match those elements.

that does not appear to be the cvase, thwe form is used in a view

Although the value of the --vaadin-form-item-row-spacing is defined in built-in styles for the :host selector, it doesn’t mean you can’t override it.

A screenshot of your DOM hierarchy would help (from the layout all the way up to the body)