Vaadin 21 flow. NumberField width vs NumberField Input Field width

Question

How to set different width (shorter) for input field in NumberField than label or helper for this field.

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

Why do you want to set the width of the input inside the field? — Jouni, Nov 19 '21 at 07:46
If the problem is that the label has a long text and gets cut short, would styling the label to overflow work instead? — Anna Koskinen, Nov 19 '21 at 10:21

score 2 · Answer 1 · answered Dec 03 '21 at 13:42

You should be able to use CSS to theme the part="input-field". In your frontend folder, under the directory /frontend/themes/[your-theme]/components/ create the file vaadin-number-field.css if one doesn't exist already.

In that file, add this:

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

Vaadin 21 flow. NumberField width vs NumberField Input Field width

1 Answers1