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() 时，这意味着您正在尝试使用与父元素一样多的 space。如果你想使用尽可能多的 space 作为你的内容需要，你通常需要 setSizeUndefined()，虽然我认为 TextField 可能有一个默认宽度（至少它曾经在 Vaadin 8 中使用）并且在那种情况下它可能行不通。（我手头没有 Vaadin 14 项目来测试这个。）

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

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

Answer 2

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

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

这是一种方法。

vaadin-文本字段-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");

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

Vaadin14: How to change width of TextField label (caption)?

css

vaadin

textfield

vaadin-flow

vaadin14