vaadin

Vaadin TextField suffixComponent with multiple icons

I'm trying to use the Vaadin TextField Prefix & Suffix component feature with multiple icons, but when I wrap the multiple icons in a div or span some styling changes that makes the icons change size (gets enlarged slightly).

For instance the following code:

TextField tf = new TextField();
tf.setPrefixComponent(VaadinIcon.CLIPBOARD_TEXT.create());
tf.setSuffixComponent(new Span(VaadinIcon.CLIPBOARD_TEXT.create(), VaadinIcon.LINK.create()));

Generates a text field that looks like: prefix looks good but suffix gets enlarged

This is on Vaadin 24.1 where I just took the output generated from start.vaadin.com and adjusted the textbox.

Any hints to how I can get the default styling when wrapping multiple icons in a container?

Solution

  • So after inspection the browser console and comparing the styles applied it became clear that the small version of the icon was due to it having padding: 0.25em.

    I created a TextFieldBuilder where I keep the icons in a list, then I use the following code to apply the icons to the text field:

    if (icons.size() == 1) {
    tf.setSuffixComponent(icons.get(0));
} else if (icons.size() > 1) {
    // work around vaadin styling issue by manually adding some padding if we have multiple icons
    icons.forEach(i -> i.getStyle().set("padding", "0.25em"));
    tf.setSuffixComponent(new Span(icons.toArray(Icon[]::new)));
}

    I'm not 100% satisfied since I think there is a little too much space between the icons. I did try with individual left/right/top/bottom padding but I was not able to get it any better than this.

    It now looks like:

    somehwat fixed styling