Hello,
I have an issue where I have a Combobox that contains icons for each item. In the drop down list, the icons and text are displayed well. However, in the selected item field, the text is steered to the left and therefore looks like it is almost lying on top of the icon. How this looks is shown in the attached picture. What could be the possible cause and solution to this?
I am using Vaadin Light theme as such:
$v-background-color: hsl(0, 0, 99.5%);
$v-app-background-color: #fff;
$v-focus-color: hsl(218, 80%, 60%);
$v-border: 1px solid (v-shade 0.6);
$v-border-radius: 3px;
$v-bevel: inset 0 1px 0 v-tint;
$v-textfield-bevel: false;
$v-gradient: v-linear 3%;
$v-shadow: false;
$valo-menu-background-color: hsl(218, 20%, 98%);
$v-friendly-color: hsl(163, 61%, 41%);
$v-error-indicator-color: hsl(349, 66%, 56%);
And here is the java code regarding the combobox:
comboBox = new ComboBox<CountryData>();
comboBox.setEmptySelectionAllowed(false);
comboBox.setSizeFull();
setLanguageStrings();
comboBox.setItemIconGenerator(new IconGenerator<CountryData>() {
@Override
public Resource apply(CountryData item) {
String flagName = null;
switch(item.country) { // Flags from: https://www.iconfinder.com/iconsets/142-mini-country-flags-16x16px
case EN:
flagName = "flag-united-kingdom";
break;
case SV:
flagName = "flag-sweden";
break;
}
// Image as a file resource
return new ThemeResource("images/" + flagName + ".png");
}
});
comboBox.setItemCaptionGenerator(new ItemCaptionGenerator<CountryData>() {
@Override
public String apply(CountryData item) {
return item.countryName;
}
});
comboBox.addSelectionListener(new SingleSelectionListener<CountryData>() {
@Override
public void selectionChange(SingleSelectionEvent<CountryData> event) {
Locale locale = null;
switch(event.getValue().country){
case EN:
locale = new Locale("en", "GB");
break;
case SV:
locale = new Locale("sv", "SE");
break;
}
MyUI.getCurrent().setLocale(locale);
if(languageSelectionFiredFromUser)
resetLanguage();
else
languageSelectionFiredFromUser = true;
}
});
HorizontalLayout hLayoutLanguage = new HorizontalLayout();
hLayoutLanguage.setSpacing(true);
hLayoutLanguage.addComponents(comboBox);
hLayoutLanguage.setComponentAlignment(comboBox, Alignment.BOTTOM_LEFT);
Where setLanguage looks like this: (Adds the items to the combobox)
private void setLanguageStrings() {
countriesData = new ArrayList<CountryData>();
countriesData.add(new CountryData(resourceBundle.getString("country.name.english"), Country.EN));
countriesData.add(new CountryData(resourceBundle.getString("country.name.swedish"), Country.SV));
comboBox.setCaption(resourceBundle.getString("combobox.country.title"));
comboBox.setItems(countriesData);
}
And resetLanguage looks like this: (Sets the selected language to the one currently in the locale for the UI)
private void resetLanguage() {
languageSelectionFiredFromUser = false;
if(MyUI.getCurrent().getLocale().getLanguage().equals(new Locale("en").getLanguage()))
for(CountryData countryData: countriesData)
if(countryData.country.equals(Country.EN)) {
comboBox.setSelectedItem(countryData);
return;
}
if(MyUI.getCurrent().getLocale().getLanguage().equals(new Locale("sv").getLanguage()))
for(CountryData countryData: countriesData)
if(countryData.country.equals(Country.SV)) {
comboBox.setSelectedItem(countryData);
return;
}
}
I am thankful for all input I can get, but I prefer not to use CSS to fix this issue as it feels to me like this is such a basic problem that the combobox should be able to handle it itself if you use it the correct way.
