Vaadin14:如何更改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可能有一个默认的宽度(至少在Vaadin8中是这样的)，在这种情况下，它可能不起作用。(我手头还没有Vaadin 14项目来测试它。)

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

编辑：overflow: visible允许标签延伸到TextField主体之外。

Answer 2

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

要让它像你喜欢的那样工作(标签比字段长)，你需要按照Anna的建议做(overflow: visible)，或者将主组件宽度设置为auto，并将内部text-input元素的宽度设置为固定值(例如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");