ComboBox.setStyleGenerator is not working

I am having trouble setting combobox items style by calling:

itemCombobox.setStyleGenerator(item -> item.isSpecial() ? "red" : ""); But I am not able to see any effect, I have also defined the new style name in my css.

v-filterselect-item-special { background: red; font-weight: bold; } This as per the documentation


You’re supposed to have

itemCombobox.setStyleGenerator(item -> item.isSpecial() ? "special" : ""); in there, that works for me.


Note that the popup is not on the same root element as the textfield part of the ComboBox, it’s on the Overlays div near at the root of the body of the document. It’s actually pretty hard to inspect the overlay popup, as it auto-closes when you click anywhere else (I think it’s doable with DOM Breakpoints in Chrome, but definitely not easy).

Did you recompile your theme using the vaadin:compile-theme target or similar? You might want to test if the style is there by adding a Label like follows:

new Label("<div class=\"v-filterselect-item-special\">label</div>", ContentMode.HTML)


I tried that … Actually “red” is a typo. I tried with “special”. No class name is given with this name v-filterselect-item-special I tried to inspect it in fire bug as well and I didn’t see that class name given any where.

I pushed my project where I tested this to GitHub:

Thanks I made a mistake when I created the style now it is working fine. I really appreciate it.

Good to hear!