vaadin - Vaadin 21 流。NumberField 宽度与 NumberField 输入字段宽度

Question

如何为输入字段设置与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

Answer 1

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

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

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