Vaadin 14：如何更改 TextField 标签（标题）的宽度？

Question

使用 Vaadin14 我想更改 TextField 的标签（标题）的宽度。使用默认值，即使我将 TextField 的大小设置为“setSizeFull”，标题也只会部分显示。 我尝试了以下（类似于 Vaadin14 应用启动代码）：

 TextField queryString = new TextField();
 queryString.setWidth("200px");
 queryString.setLabel("long label text, long label text, long label text");
 queryString.setThemeName("longlabel");

CSS 文件导入：

 @CssImport(value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field")

vaadin-text-field-styles.css 的内容是：

 :host([theme~="longlabel"]) [part="label"] {
    width: 400px;
 }

这不会改变标签的宽度。

是否可以查找 Vaadin14 组件的默认 CSS 设置？这对其他组件的更改也很有帮助。

Answer 1

您的父布局是否有足够的空间来显示该文本？它可能会剪掉标签。

当您使用setSizeFull() 时，这意味着您正在尝试使用与父元素一样多的空间。如果您想根据内容的需要使用尽可能多的空间，则通常需要setSizeUndefined()，尽管我认为 TextField 可能具有默认宽度（至少在 Vaadin 8 中使用过），在这种情况下它可能无法正常工作。 （我现在手头没有 Vaadin 14 项目来测试它。）

如果queryString.setWidth("400px"); 有什么不同，你试过了吗？

编辑：overflow: visible 允许标签超出 TextField 的主体。

Answer 2

标签的宽度受主组件宽度的约束。当您将文本字段的宽度设置为 200 像素时，标签不能超过此值。

要让它按你喜欢的方式工作（标签比字段长），你要么需要按照 Anna 的建议（溢出：可见），要么将主组件宽度设置为自动，并设置内部文本的宽度 -输入元素为固定值（例如 200px）。

这是一种方法。

vaadin-text-field-styles.css：

:host {
  --vaadin-text-field-default-width: auto;
}

[part="input-field"] {
  width: var(--input-field-width);
}

Java：

TextField queryString = new TextField();
queryString.getElement().getStyle().setProperty("--input-field-width", "200px");