Vaadin14：如何更改 TextField 标签标题的宽度？

编程问答 2022-04-29

问题描述

使用 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 设置？这也有助于其他组件的更改。

解决方法

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

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

您是否尝试过 queryString.setWidth("400px"); 有什么不同？

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

,

标签的宽度受主组件宽度的限制。当您将文本字段的宽度设置为 200 像素时，标签不能长于此。

为了让它像你喜欢的那样工作（标签比字段长），你要么需要做安娜建议的（溢出：可见），要么将主要组件宽度设置为自动，并设置内部文本的宽度-输入元素为固定值（例如 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");
textfieldtextfieldtextfieldvaadinvaadin-flowvaadin14