FormLayout - change labels alignment to right side

How to align labels of FormLayout to the right? We can see there is much free space between short labels and corresponding fields. It is harder to see which label is lined with which field.

The layout is created like so:

FormLayout formLayout = new FormLayout();
formLayout.setResponsiveSteps(
    new FormLayout.ResponsiveStep("0", 1, FormLayout.ResponsiveStep.LabelsPosition.ASIDE)
);
TextField textField = new TextField();
textField.setReadOnly(true);
textField.setWidthFull();
formLayout.addFormItem(textField,"Opis");
...
...

We are using Vaadin 24.4.15 which does not have FormLayout::setLabelWidth method yet so we set it with css: vaadin-form-layout { --vaadin-form-item-label-width: 220px; }

This should do it:

vaadin-form-item::part(label) {
  text-align: end;
}
1 Like