Vaadin 21 流。 NumberField 宽度与 NumberField 输入字段宽度答案

【问题标题】：Vaadin 21 flow. NumberField width vs NumberField Input Field widthVaadin 21 流。 NumberField 宽度与 NumberField 输入字段宽度
【发布时间】：2021-12-29 15:46:20
【问题描述】：

如何为NumberField 中的输入字段设置与该字段的标签或助手不同的宽度（更短）。

NumberField numberField = new NumberField("Label");
numberField.setWidthFull(); // full width for the whole NumberField
// how to set width = 12rem for input field inside NumberField
// i try to 
numberField.getStyle().set("--input-field-width", "12rem");
//but its not working

【问题讨论】：

为什么要设置字段内输入的宽度？
如果问题是标签的文本很长并且被剪短，是否可以将标签样式设置为溢出？

标签： vaadin vaadin-flow vaadin21

【解决方案1】：

您应该能够使用 CSS 为 part="input-field" 设置主题。在您的前端文件夹中，在目录下 /frontend/themes/[your-theme]/components/ 如果文件不存在，则创建文件vaadin-number-field.css。

在该文件中，添加以下内容：

[part="input-field"] {
    width: 12rem;
}

【讨论】：