Label on Top in auto responsive Form layout

Flow
1

Is there a way to apply consistent styling to inputs that have labels and those that don’t? I’m trying to ensure a uniform look across all input fields. Those without a label are not aligned with the ones with a label on top, I’ve partially fixed it with self-align, but I’ve found that it does not work as expected in all cases.
I think this may be a viable way, but not sure how to do it.

2

Usually I’d put the fields in a HorizontalLayout and “baseline” align them.

Without alignment:

image
image933×126 4.5 KB

With “Baseline” alignment:

image
image937×109 4.03 KB

var textFieldNoLabel = new TextField();
var textFieldWithLabel = new TextField("Labelled");
var comboBoxNoLabel = new ComboBox();
var comboBoxWithLabel = new ComboBox("Some combo box");

var layout = new HorizontalLayout(textFieldNoLabel, textFieldWithLabel, comboBoxNoLabel, comboBoxWithLabel);
layout.setAlignItems(Alignment.BASELINE);

add(layout);

Not sure what I’d do for FormLayout, but I could take a look. Do you have a simple code example? And which version of Vaadin are you using?

3

I am using Java 21, and Vaadin 24.8.
The form layout has auto-responsive feature enabled.

    FormLayout formLayout = new FormLayout();
    formLayout.setAutoResponsive(true);
    FormLayout.FormRow formRow1 = new FormLayout.FormRow();
    formRow1.add(new TextField("TestLabel"));
    formRow1.add(new TextField());
    formLayout.add(formRow1);
    add(formLayout);

Here, align-self does the trick, as this is a very simple example. Still, I want to be able to have the same styling on the field without a label, as the field with a label. ( and not to write “custom” css like align-self )

1 Like
4

This is actually a bug in the new autoResponsive mode for FormLayout: [FormLayout] FormRow in auto responsive FormLayout does not have baseline alignment · Issue #7646 · vaadin/flow-components · GitHub. It should be using baseline alignment by default. Will be fixed in an upcoming patch release.

In the meantime, you can fix it by applying the following css in <your-theme>/components/vaadin-form-layout.css:

:host([auto-responsive]) #layout {
  align-items: baseline;
}
2 Likes
5

Thanks for the heads up. Solved!