Hi,
I’ve been trying to build a search field with the magnifier icon inside the textfield just like the Add-ons search field.
Clicking the icon (magnifier or any other icon, like a magnifier with a down-arrow, for ex.) would show a popup menu with some choices.
Could any of the experts provide some starting pointers?
Thanks in advance.
In what way inside the text field? If you put it inside the area where the use can write, the button would go over the text, or what is the idea?
If you want to have it inside the TextField border, disable the default border, and make a composite component with CustomComponent that has the borderless TextField and the small button, and then enable border for the CustomComponent. Use a PopupView, Select/ComboBox, or something for the popup menu; see the
SplitButton example
.
Why isn’t using just plain ComboBox suitable in your case?
This sounds promising. I’ll have a look at the CustomComponent.
Because the magnifier icon should be on the left side and I didn’t want to mess with the field data model just to add a couple of options.
It’s probably just a matter of look&feel, but the pattern will help in the future, I’m sure.
Thanks.
In case anyone out there still looking how to do this…here’s an example that may work for you…
TextField entry = new TextField(“User Name:”);
entry.setIcon(VaadinIcons.USER);
entry.addStyleName(ValoTheme.TEXTFIELD_SMALL);
entry.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON);
Cheers
Gaston