General CSS and styling questions with Form Layout and AutoResponsiveness

Flow
1

Hi everyone,

I’m working with Vaadin 24.8 and trying to make use of the new auto-responsiveness features. I’m fairly new to CSS and theming in general, so I might be missing something obvious—any help or pointers would be much appreciated!

1. How can I control --vaadin-form-layout-column-spacing?

I tried overriding the column spacing like this:

:host {
–vaadin-form-layout-column-spacing: var(–lumo-space-m);
–vaadin-form-layout-row-spacing: 0;
}

But it doesn’t seem to make any difference. I expected the spacing between columns to decrease, but nothing changed. Is there something I’m misunderstanding about how or where to apply this custom property?

2. How do I control the height of an input inside a vaadin form layout?

The form layout is autoResponsive.
Inputs seem to have a height that’s determined by some built-in variable or internal logic. I haven’t been able to figure out what exactly is controlling it or how to override it. Is there a standard way to adjust the input height when they’re used inside a form layout?

3. Inputs without labels are vertically misaligned in a grid

I have some input fields inside a grid that don’t have labels, and they appear vertically misaligned compared to other inputs with labels. I tried using align-self, but it doesn’t seem to work—possibly because the inputs default to height: 100%? Is there a best practice for fixing this kind of alignment issue? Tried refering to

4. Nested grids and form layouts (legacy-like structure)

I’m working on a legacy use case where grids can contain other grids or nested layouts. When I try to recreate this structure in Vaadin 24.8 using vaadin-form-layout with auto-responsiveness, the layout behaves unpredictably or breaks entirely. Is this kind of structure supported at all? If not, are there any recommended workarounds or patterns for nesting layouts like this in a responsive way?
What I observe is that I may have a container with colspan 2 which represents 2 cells in the grid, but each cell contains a container which has colspan 2, 3, it does not matter, and the grids overlap when put in the “parent” with colspan 2.

2
  1. Spacing:
    There’s a typo in your property names: they’re prefixed with two dashes, not one.
    Also, I’m not sure where you’re putting that css.
    Ideally, in V24, you would be using normal CSS, not shadow DOM css which you have there (with the :host selector), so you’d place the css in your theme’s styles.css or some other normal stylesheet, like this:
vaadin-form-layout {
    --vaadin-form-layout-column-spacing: 100px;
    --vaadin-form-layout-row-spacing: 100px;
}
  1. The FormLayout doesn’t have anything to do with the height of input fields. Each field component has its own default height. TextFields and others that look similar can be customized by setting a value to --vaadin-input-field-height, e.g.
vaadin-text-field {
  --vaadin-input-field-height: 50px;
}

  1. To make sure input fields are vertically aligned correctly outside of a FormLayout, use align-items: baseline.

  2. I think we’ll need a picture to understand this one.

3

  1. Solved. I am not sure what is the difference between “normal” CSS and shadow DOM CSS, so this is probably a good opportunity to read about it.

  2. Ok. Thanks for the info! The difference was coming from my CSS

  3. I gave the wrong explanation of the issue, and thus, the answer did not help, but eventually I think I found a solution for my problem. I was setting align-self in the wrong place, but thanks for your time.

  4. I understand that the description was confusing, I want to experiment a bit more and will provide screenshots if stuck.

4

There’s a page about Shadow DOM styling in the Vaadin Styling docs section: How to style Shadow DOM elements in Vaadin applications.

The TL;DR is:

Vaadin components use shadow DOM to isolate their internal elements from the surrounding page. This prevents anything else on the page, such as JS or CSS, from messing with the component’s implementation as elements in the component’s shadow DOM are inaccessible to external CSS and JS.

This means that, to style those elements, some mechanism is needed to access them with css from the outside.

Pre-V24, css would be applied to components by placing it in themes/your-theme/components/vaadin-component-name.css, from where it would be injected into the internal shadow DOM of the component (which you cannot style from the “outside”).

(Stylesheets in the components folder, named after the component in question, are automatically injected into its shadow DOM, whereas stylesheets elsewhere in your theme folder are just loaded into your normal “light DOM”.)

In V24 onwards, the recommended approach has been to place your css in a normal stylesheet like styles.css, and use selectors like ::part() to access elements inside the component’s shadow DOM that would otherwise be inaccessible to normal css.

All of the selector references you’ll find on the Styling tabs of component docs pages are for light DOM CSS, so they won’t work inside shadow DOM.

Older apps that were made for pre-V24 styling typically use the Shadow DOM approach, and can continue doing so as it’s still supported (for now), but we recommend that they’re eventually refactored to normal css for future-proofing.

1 Like