FormLayout spacing between items

General
1

Hi,

i followed the suggestions here: Reducing the space between form-item - Vaadin Forum but it wont work in Vaadin 24.5. Has anyone a working solution? In the documentation is also mentioned, using --vaadin-form-item-row-spacing

Getting the gap bigger, works. but not smaller.

1 Like
2

Hi Nico,

It doesn’t work as expected, it’s a known issue. It’ll be reworked in the future to use CSS grid.
For now, you can do the following:

vaadin-form-layout.css

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

styles.css

html {
  --vaadin-form-layout-row-spacing: 1rem;
}
3

thank you, do i need to add the classname to the component? Cant get it to work

4

No class names needed.

Just put vaadin-form-layout.css in frontend/themes/<my-theme>/components and you should be good. Make sure you have vaadin.frontend.hotdeploy=true in application.properties.

5

image

ups my fault. Thank you :)

6

Its not working in my case. I have the html {} part in theme-editor.css looks like it comes from copilot. I have added --vaadin-form-layout-row-spacing: 1rem; it there and also put it into style.css

hmm any other idea?

7

Using the browser’s inspector, are the styles applied? If not, then you might have to clean the project.

8

It gets applied but the gab stays

image
image

Maybe it has something to do with using

formLayoutOrderData.addFormItem(adressValueSpan, "Adresse");

9

My apologies, I wrote --vaadin-form-layout-row-spacing instead of --vaadin-form-item-row-spacing.

In the browser, open up the form layout’s shadow DOM and check if the #layout has the gap style mentioned above.

Screenshot 2024-11-01 at 11.21.55

10

Thanks for checking. It has layout id but the gap is still big. Even after frontend prepeard and built

image

Here is what i have

image

image

and i have added it to the theme-editor.css as well

11

Right, and do you see that row-gap in the browser when you select #layout?

12

image

no its not there, when i add it therem the gab gets bigger.

image

Could this issue exists because of a sourrounding component?

13

It means the vaadin-form-layout.css stylesheet is not being picked up.

Is it located in src/main/frontend/themes/<my-theme>/components/?

14

Unfortunately its not working. When i move this file the build frontend process throws following exception:

Even when i import the file @import url(‘./components/vaadin-form-layout.css’) into my styles.css

Failed to find the following imports in the `node_modules` tree:
      - @vaadin/horizontal-layout/src/vaadin-horizontal-layout.js
      - @vaadin/polymer-legacy-adapter/style-modules.js
      - @vaadin/tabs/src/vaadin-tabs.js
      - @vaadin/tabs/src/vaadin-tab.js
      - @vaadin/tooltip/src/vaadin-tooltip.js
      - @vaadin/icons/vaadin-iconset.js
      - @vaadin/progress-bar/src/vaadin-progress-bar.js
      - @vaadin/side-nav/src/vaadin-side-nav-item.js
      - @vaadin/text-area/src/vaadin-text-area.js
      - @vaadin/icon/src/vaadin-icon.js
      - @vaadin/app-layout/src/vaadin-drawer-toggle.js
      - @vaadin/checkbox/src/vaadin-checkbox.js
      - @vaadin/vertical-layout/src/vaadin-vertical-layout.js
      - @vaadin/button/src/vaadin-button.js
      - @vaadin/app-layout/src/vaadin-app-layout.js
      - @vaadin/scroller/src/vaadin-scroller.js
      - @vaadin/side-nav/src/vaadin-side-nav.js
      - @vaadin/upload/src/vaadin-upload.js
      - @vaadin/date-picker/src/vaadin-date-picker.js
      - @vaadin/form-layout/src/vaadin-form-item.js
      - @vaadin/form-layout/src/vaadin-form-layout.js
  If the build fails, check that npm packages are installed.

  To fix the build remove `package-lock.json` and `node_modules` directory to reset modules.
  In addition you may run `npm install` to fix `node_modules` tree structure.

(Deleted the node_modules folder and package-lock.json but didnt build)

Doesnt build:

image

When those files are in my-theme, the build is fine

image
image558×534 39 KB

15

You don’t need to do that. If you place vaadin-form-layout.css in components it should be picked up automatically.

Those styles, however, need to use the Shadow DOM, as #layout isn’t accessible in the Light DOM. If you use the Light DOM, you don’t need to place them in components, nor do you need to name them after the component.

16

Ok, i removed the import now the build process is running and running. Lets see if it comes to success, looks like it runs forever

17

The build fails again

[INFO] 

  Failed to find the following imports in the `node_modules` tree:
      - @vaadin/polymer-legacy-adapter/style-modules.js
      - @vaadin/vaadin-lumo-styles/spacing.js
      - @vaadin/common-frontend/ConnectionIndicator.js
      - @vaadin/vaadin-lumo-styles/typography-global.js
      - @vaadin/vaadin-lumo-styles/style.js
      - @vaadin/vertical-layout/src/vaadin-vertical-layout.js
      - @vaadin/vaadin-lumo-styles/color-global.js
      - @vaadin/vaadin-lumo-styles/sizing.js
      - @vaadin/vaadin-lumo-styles/vaadin-iconset.js
      - @vaadin/login/src/vaadin-login-form.js
  If the build fails, check that npm packages are installed.

  To fix the build remove `package-lock.json` and `node_modules` directory to reset modules.
  In addition you may run `npm install` to fix `node_modules` tree structure.
18

How do you build the project; mvn clean install?

If I download a project from Start, add vaadin-form-layout.css in components it works as expected. Not sure what’s going on there.

19

Yeah i tried mvn clean install that works but then the build frontend fails. I think it has something to do with our firewall and npm packages which can not be downloaded