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

Question

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

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

Answer 1

Если вы используете 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");

Answer 2

Для настройки личности 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"