FormLayout aside labels breaking in two lines

Support
#1

Hi,

How to make sure the labels in the formLayout are not shown in two lines? Is there a way to change the column width of the labels?

Thanks

#2

Hi,

In order to change default label width, you need to set value for the --vaadin-form-item-label-width CSS variable. You can do this by adding a class name to the FormLayout component

<formLayout id="form" classNames="form-layout-label-width-10em" ...>

and implement style:

.form-layout-label-width-10em {
    --vaadin-form-item-label-width: 10em;
}

Regards,
Gleb

1 Like