How to set vaadin-form-layout row spacing?

Hilla
21

Thanks. Yeah, no shadow root between body and the vaadin-form-layout. In that case styles.css should work. I assume we are talking about something like frontend/themes/mytheme/styles.css

22

yes

23

FYI i tested both selectors using background-color: red

24

They both work

25

–vaadin-form-item-row-spacing seems to have no effect

26

Huh. Well, what do you know: with the Lumo theme, that is indeed the case. That property is overridden: https://github.com/vaadin/web-components/blob/master/packages/form-layout/theme/lumo/vaadin-form-item-styles.js#L10-L12

27

So, then you need to do target all vaadin-form-item elements directly:

styles.css

vaadin-form-item {
  --vaadin-form-item-row-spacing: 100px;
}
28

I’m not even going to try to sugarcoat it: Form Layout is not a very good component :sweat_smile:

29

it does not work

30

yeah but i am becoming frustrated slowly, we chose hilla+vaadin components to make our lives easier :smile:

31

vaadin-form-item seems to match only explicitly wrapped items with

32

It seems not to match vaadin fields

33

and the spacing did not apply at all

34

nor to the explicitly wrapped ones

35

Yeah, sorry to hear that this is being a struggle. Maybe backtrack a bit: what are you trying to accomplish?

36

the form is very condensed, would like to have more ait between the lines

37

You say you want to increase the spacing. For all forms in your app I assume?

38

it is a small web calculator app with just two screens with two forms, i prefere to do it on the second one, which is a contact form

39

I feel like I need to try this locally now. I wonder what makes it so difficult…

40

I fixed the most obvious spacing by adding vaadin-checkbox {
margin-top: 25px;
}