ComboBox and CSS

Vaadin 6 / 7 / 8 Framework UI
1

Hi there,

I’m currently working on a form which has many mandatory fields, ComboBoxes as well. I want to mark all of these with a “mandatory” selector in the CSS, so that the mandatory fields have a different background color. That’s very simple for TextFields, but not for ComboBoxes as they are rendered from different images. I created my version of these images with different background color, but I’m having problems assigning them to the Vaadin selectors properly.

OK, so I have a ComboBox with setStyleName(“mandatory”) and my own ComboBox images with approriate names. However, the following selector doesn’t seem to work in my own styles.css:

.mandatory .v-filterselect-button {
overflow: hidden;
width: 25px;
height: 24px;
background-image: url(img/right-mandatory.png); /** sprite-ref: verticals ; sprite-margin-bottom: 1px */
cursor: default;
}

Any idea where does it go wrong?

Should I have my own version of vertical-sprites.png as well? What is this file actually? The Book of Vaadin has unfortunately very poor information on this.

Thanks,
Marton

2

Why don’t you just call
setRequired(true)
?

3

Sprites are an optimization that is performed to combine many small images in the standard themes into one big image for faster loading. In custom themes, one should use a modified copy of the original small image instead of trying to find the correct piece of the sprite, which probably would break anyway when upgrading Vaadin. In your case, you can simply remove the comment about sprites as that is only extra information used by the sprite compiler and you already refer to the correct image.

As a general note, Vaadin JAR contains both the original images and CSS files (in subdirectories of a theme) and the compiled versions (theme root level styles.css and the sprite images).

To investigate why your styles are not effective, use e.g. FireBug and see if e.g. some more specific rule overrides your settings.