CODEWITHSUNDEEP
vaadinvaadin-flowvaadin21
marfe
marfe

Reputation: 11

Vaadin 21 flow. NumberField width vs NumberField Input Field width

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

Upvotes: 1

Views: 206

Answers (1)

ollitietavainen
ollitietavainen

Reputation: 4275

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;
}

Upvotes: 2

Related Questions