How to add search icon in Vaadin ComboBox?

Question

I have a ComboBox that allows me to select these elements and an icon that accepts the choice:

functionality is all right.

I am looking for an effect to get the search icon in comboBox. as in the Icons of Vaadin :

How it's done?

I tried

 comboBox.setIcon(new ThemeResource("search.png")); 

nothing changed.

The backend developer here is not suitable for front-end tools.

// ============================================>

EDIT:

One thing I can think of is to remove the ComboBox border (I don't know how to do it yet) and make a border for the component containing the icon and ComboBox . is there any other / better way?

Answer 1

Actually, looking at this page source, and I may be wrong, but it seems that this is not a standard Vaadin cell box

An alternative workaround based on your discussion with @defaultlocale might group a button with combos like

or that:

In any case, you can customize the code below to your liking, and you can also check sampler sources 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); } } 

---

Edit later

According to the above and your last board, you can also delete your borders, group them in a layout and add a layout to the panel for a general border effect (perhaps a more elegant solution for getting a border, but I did not find the default styles, and I have no more time to investigate, therefore 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 slight theme setting to avoid focusing on the button

 .v-button-no-focus:after { content: none; } 

and get:

Answer 2

Perhaps you can take css from the Vaadin Icons page and customize it to suit your application.

Sample Java code:

 ComboBox comboBox = new ComboBox("Combobox"); comboBox.addStyleName("searchbox"); 

SASS example:

 .v-filterselect-searchbox:before { font-family: FontAwesome; content: "\f002"; //search icon left: 10px; position: absolute; top: 0; line-height: 35px; } .v-filterselect-searchbox .v-filterselect-input{ padding-left: 30px; } 

You will probably need to adjust the offset values ​​to properly align the icon in your theme. In addition, you will need to set the combobox width explicitly, since the input text add-in is set in CSS.

 comboBox.setWidth("400px"); 

Final result: