如何在Vaadin Flow中设置FormLayout的标签宽度?

时间:2019-01-28 20:48:46

标签: vaadin-flow

使用Vaadin 12和FormLayout,并在输入字段的左侧添加标签。

我想设置标签列的宽度。如何使用Java API实现这一目标?

2 个答案:

答案 0 :(得分: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");

答案 1 :(得分: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>

Gotcha (对我而言):theme-for="vaadin-form-item"而非theme-for="vaadin-form-layout"

相关问题