In vaadin 24 how to shrink the combo box size

General
1

I am trying to reduce the height of the combo box, tried setting height and also removed padding for the input-text field. But it is not reducing the height.
Can you please help?
combo box

code-combobox
code-combobox893Ă—215 20.3 KB

2

Hi, you can check the documentation on what properties you can use to style a combobox here: Styling | Combo Box | Components | Vaadin Docs

To handle the height of the input you can use the --vaadin-input-field-height property like combobox.getStyle().set("--vaadin-input-field-height", "20px");

And regarding the padding you can use the::part(input-field) CSS selector like

vaadin-combo-box::part(input-field) {
    padding-left: 0;
}
1 Like
3

If setting --vaadin-input-field-height isn’t producing the desired, you might have to theme vaadin-combo-box::part(clear-button) and vaadin-combo-box::part(toggle-button) as well.

If the input field’s height is set too small, it will be influenced by the buttons’ font size and height.