Как установить ширину метки FormLayout в Vaadin Flow?

Question

Использование Vaadin 12 с FormLayout и метками слева от полей ввода.

Я хочу установить ширину столбца метки.Как этого добиться, используя Java API?

Answer 1

Для настройки индивидуальной FormItem ширины метки и / или более динамичного подхода см. Оба ответа @TatuLund и его комментарий к этому решению.

Для установки метки с помощью в целом Form,используйте @HtmlImport("frontend://styles/shared-styles.html")

И в shared-styles.html добавьте этот фрагмент:

<dom-module theme-for="vaadin-form-item" id="custom-form-item">
    <template>
        <style>     
            :host {
                --vaadin-form-item-label-width: 15em;  
            }
        </style>
    </template>
</dom-module>

Получено (для меня): theme-for="vaadin-form-item" вместо theme-for="vaadin-form-layout"

Answer 2

Если вы используете метод FormItem.addToLabel(..) для установки содержимого метки, то ширина этого элемента в FormItem контролируется пользовательским свойством --vaadin-form-item-label-width (см. Подробнее: https://vaadin.com/components/vaadin-form-layout/html-api/elements/Vaadin.FormItemElement). Значение по умолчанию - 8em.Таким образом, вы можете установить шире, например, с помощью:

formItem.getElement().getStyle().set("--vaadin-form-item-label-width", "10em");