ComboBox and setStyleName()

Vaadin 6 / 7 / 8 Framework UI
1

I am trying to change the css style of the ComboBox but it is not working.

For example in a Form I have
ComboBoxMy cb = new ComboBoxMy(“mydisplayl”);
cb.setStyleName(“mybold”);
this.getLayout().addComponent(cb);

But I get plain vanilla style ComboBox.

And “mybold” in css is :
.mybold {
font-weight: bold;
}

But the same works fine with TextField,
TextField tf = new TextField(“statename”);
tf.setStyleName(“mybold”);
this.getLayout().addComponent(tf);
This properly shows the bold fonts.

2

Hi,

ComboBox is a lot more complex beast to theme than TextField. The .mybold selector, when applied to a ComboBox, will target an outer DIV element that wraps the text input element in the combo box. You need to use a different selector to apply styles for the input element inside that DIV.

This should do the trick (v-filterselect is the classname for ComboBox, historical reasons):

.v-filterselect-mybold .v-filterselect-input {
    font-weight: bold;
}

PS. all theme related issues should go to the “Themes” category. Thanks!

3

thank you for your post
however a couple of points on your suggestions

a) we are not interested in what “should work”
we want to know what “would work”
what is the point of cluttering up the internet
with your suppositions

b) did it not occur to you
that the questionner might possibly be more interested
in the drop down menu display
rather than the text entry box?
would that not be the more logical for a desire for changing the appearance of a combobox?
thus your advice might possibly have been more usefully something like:

.v-filterselect-suggestmenu .gwt-MenuItem {
font-family: Courier;
/* font-weight: bold;
color: #000000;
font-size: 20pt; */
white-space: nowrap;
}

c) given that most questionners
are probably like myself newbies
do you not think that it would be a good idea
to append to ALL your recommendations
for editing changes to CSS
that it is ESSENTIAL
to clear the browser cache
in order to see the results of your changes
or is it that you enjoy the concept
of people making endless changes over hours and hours
and wondering why no matter what they try
nothing ever works

all that said
i did get one thing from your post
which was that it was something to do with .v-filterselect
i eventually (i estimate 3 hours) worked the rest out myself

thank you