Edit CSS of ComboBox

Flow
1

HI guys, Im trying to edit the css of my combobox but cant make it work…

DOM

<dom-module id="custom-combobox" theme-for="vaadin-text-field">
    <template>
        <style>
            /* styling for combo-box */ 
            [part="text-field"]
 {
                color: #FFF;
                font-weight: 800 !important;
            }
        </style>
    </template>
</dom-module>

Class

@HtmlImport("frontend://customhtml/custom-combobox.html")
public class CustomComboBox extends ComboBox<String> {

    public CustomComboBox() {
        setId("custom-combobox");
    }
    
}

What is the problem with my code?

2

I see a couple of potential problems here.

Firstly, your dom module has theme-for="vaadin-text-field", while you’re creating a theme for vaadin-combo-box.

Another issue is that the element id you add with setId in Java code isn’t the same as the <dom-module id= attribute as you’re probably expecting here.

I would rather use setClassName("custom-combobox"); in the Java component and

<style>
  :host(.custom-combobox) [part="text-field"]
 { // :host() is the root element, that is `<vaadin-combo-box>`
     // styles targeting the 'text-field' part of all comboboxes with the 'custom-combobox' class
  }

-Olli

3

Olli Tietäväinen:
I see a couple of potential problems here.

Firstly, your dom module has theme-for="vaadin-text-field", while you’re creating a theme for vaadin-combo-box.

Another issue is that the element id you add with setId in Java code isn’t the same as the <dom-module id= attribute as you’re probably expecting here.

I would rather use setClassName("custom-combobox"); in the Java component and

<style>
  :host(.custom-combobox) [part="text-field"]

{ // :host() is the root element, that is <vaadin-combo-box>

 // styles targeting the 'text-field' part of all comboboxes with the 'custom-combobox' class

}


-Olli

Hi Olli, Thank you! it works now! :slight_smile:

4

How to set a class name for a text box? No such method is available to me in Vaadin 14.

5

Olli Tietäväinen:
I see a couple of potential problems here.

Firstly, your dom module has theme-for="vaadin-text-field", while you’re creating a theme for vaadin-combo-box.

Another issue is that the element id you add with setId in Java code isn’t the same as the <dom-module id= attribute as you’re probably expecting here.

I would rather use setClassName("custom-combobox"); in the Java component and

<style>
  :host(.custom-combobox) [part="text-field"]

{ // :host() is the root element, that is <vaadin-combo-box>

 // styles targeting the 'text-field' part of all comboboxes with the 'custom-combobox' class

}


-Olli

I am also facing the styling issue in combobox.

In my case i need two kind of texfield 1 for 40px height and another 30px height of textfield.

But when I change the variable --lumo-text-field-size = 40px than it applies height only to text field but not internal textfield of combobox.

6

I was facing again the same problem in 14, until I was able to understand the documentation in the theme section. They made it easy in 14.