ComboBox InputPrompt and Icon

Hi everybody,
I’m seeing a strange behaviour of ComboBox when setting InputPrompt and Icon: the Icon is “over” the InputPrompt, there’s no spacing between them.

Here is the code:

ComboBox mycombo = new ComboBox(); mycombo.setInputPrompt("Input"); mycombo.setIcon(FontAwesome.SEARCH); mycombo.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON); Used Vaadin 7.4.0

It’s a style for TextField, ComboBox does not share its styling rules. The style works to some degree with ComboBox rather by accident, because the caption is not part of TextField and hence a style rule affecting its position is not restricted to work with only TextField. However, the indentation of the input prompt would require properly supporting it also for ComboBox.

Maybe something like the following would do the trick:

.v-filterselect-inline-icon .v-filterselect-input {
    padding-left: 37px;
}

Thank you for your suggestion Marko.
How to do that in SCSS for Valo Theme?

At the moment I solved it in a good enough way:

mycombo.setIcon(FontAwesome.SEARCH);
mycombo.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON);
mycombo.addStyleName(ValoTheme.COMBOBOX_ALIGN_CENTER);

Just put it in the .scss file of your theme,
as instructed in the book section
, and compile the theme.

I hope it works with the above rule.