Combobox input-field height

Flow
1

Hi.

I am trying to style combobox input-field height, but facing a problem doing that. Do you have any advice what could be wrong?

Tried with, which should set text-field height to 20px.

:host(.combo-search-type) [part="text-field"]
{
    height: 20px !important;
    max-height: 20px !important;
}

Cheers, Simon

2

Hi, you need to use theme attribute on the combo box and it will propagate to the text field.

<!-- Define the theme module (in index.html or in a separate HTML import) -->
<dom-module id="special-field-theme" theme-for="vaadin-text-field">
  <template>
    <style>
      :host([theme~="special-field"]
) [part="input-field"]
 {
		height: 20px;
		max-height: 20px;
      }
    </style>
  </template>
</dom-module>

<!-- Apply the theme attribute to <vaadin-combo-box> -->
<vaadin-combo-box theme="special-field"></vaadin-combo-box>
3

Hi.

I am not using .html, however, tried with the following

@Route("")
@CssImport(value="./styles/my-combobox-styles.css", themeFor="vaadin-combo-box")
public class MainView_combobox extends VerticalLayout
{
	public MainView_combobox()
	{
		ComboBox<String> comboSearchType = new ComboBox<>();
		comboSearchType.getElement().getThemeList().add("combo-search-type");
		comboSearchType.setItems("Item 1", "Item 2", "Item 3");
		comboSearchType.setValue("Item 1");

		ComboBox specialFieldCB = new ComboBox();
		specialFieldCB.getElement().getThemeList().add("special-field");
		specialFieldCB.setItems("Item 4", "Item 5", "Item 6");
		specialFieldCB.setValue("Item 5");

		add(comboSearchType, specialFieldCB);
	}
}

and my-combobox-styles.css

:host([theme~="combo-search-type"]
) [part="toggle-button"]
 {
    background: deeppink;
    height: 20px;
}

:host([theme~="special-field"]
) [part="toggle-button"]
 {
    background: orange;
}

:host([theme~="combo-search-type"]
) [part="input-field"]
 {
    background: deeppink;
    height: 20px !important;
    min-height: 20px !important;
}

:host([theme~="special-field"]
) [part="input-field"]
 {
    background: orange;
    height: 50px !important;
    min-height: 50px !important;
}

Styling works for toggle-button (see background and heigh), but not for input-field. Is this a bug or am I doing something wrong?

Cheers, Simon
18090050.png

4

If I’m not mistaken, your input-field styles should be in a theme module for vaadin-text-field, now they’re imported for vaadin-combo-box: @CssImport(value="./styles/my-combobox-styles.css", themeFor="vaadin-combo-box") p

So you should have a separate .css file for those styles and import it with @CssImport(value="./styles/filename.css", theme-for="vaadin-text-field").

5

You won’t need the part="input-field" selector when you’re styling the vaadin-text-field, either.

6

Thank you Olli for your help! Much appreciated.

That works:

//import in .java
@CssImport(value="./styles/my-textfield-styles.css", themeFor="vaadin-text-field")

//my-textfield-styles.css
:host([theme~="combo-search-type"]
) [part="input-field"]
 {
    background: transparent;
    height: 20px;
}