I have a ComboBox that allows selection of the given items, and an icon that accepts the selection:
the functionality is all fine.
I'm looking for the effect to get the search icon into the comboBox. like in Vaadin Icons:
How is this done?
I tried
comboBox.setIcon(new ThemeResource("search.png"));
it didn't do any change.
backend developer here - not good on front-end tools.
//==========================================
EDIT:
one thing i can think of is to make the border of ComboBox disappear (don't know yet how), and make a border on the component that contains both the icon and the comboBox.
is there another/better way?
Actually, looking at that page's source, and I could be wrong but, it does not seem to be a standard Vaadin combo-box
An alternative workaround based on your discussion with @defaultlocale, could be grouping a button with the combo like this
or this:
Anyway, you can tweak the code below to your liking and you can also check out the sources of the sampler for more examples.
public class ComboWithIcon extends CssLayout {
public ComboWithIcon() {
// basic item configuration
ComboBox comboBox = new ComboBox();
Button searchButton = new Button();
searchButton.setIcon(VaadinIcons.SEARCH);
searchButton.addStyleName(ValoTheme.BUTTON_FRIENDLY); // remove this to have a regular button
searchButton.addClickListener(event -> {/* add button listener here */ });
// add components to the layout - switch these to have the button to the left of the combo
addComponent(comboBox);
addComponent(searchButton);
// set group style
addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);
}
}
Later edit
Based on the above and your later edit, you can also remove their borders, group them within a layout and add the layout to a panel for the overall border effect (there is probably a more elegant solution to get the border, but I haven't found any default styles and I don't have more time to investigate, so suggestions are welcome):
public class ComboWithIcon extends Panel {
public ComboWithIcon() {
// basic item configuration
ComboBox comboBox = new ComboBox();
comboBox.addStyleName(ValoTheme.COMBOBOX_BORDERLESS);
Button searchButton = new Button();
searchButton.setIcon(VaadinIcons.SEARCH);
searchButton.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
searchButton.addStyleName("no-focus"); // remove the annoying focus effect
searchButton.addClickListener(event -> {/* add button listener here */ });
// add components to the layout - switch these to have the button to the left of the combo
CssLayout layout = new CssLayout(searchButton, comboBox);
// set group style
layout.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);
setContent(layout);
setWidthUndefined(); // fit the component widths instead of expanding by default
}
}
with a minor theme tweak to avoid the focus style on the button
.v-button-no-focus:after {
content: none;
}
and get:
