Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Button size with ThemeResource(...) Icon
Hello vaadin people,
I want to create an image which acts like a button. Now I added my image as a ThemeResource Icon to the Button. The problem is, that the whole Button/Image gets to large as the Button width adapts to the ThemeResource Image size.
Is it possible to set the Size of the Button/Image?
final GridLayout containerLocale = new GridLayout(2, 1);
containerLocale.setSpacing(true);
containerLocale.setSizeUndefined();
final Button buttonDe = new Button();
buttonDe.setStyleName(ValoTheme.BUTTON_LINK);
buttonDe.setIcon(new ThemeResource("img/DE.svg"));
containerLocale.addComponent(buttonDe);
final Button buttonGb = new Button();
buttonGb.setStyleName(ValoTheme.BUTTON_LINK);
buttonGb.setIcon(new ThemeResource("img/GB.svg"));
buttonGb.setWidth("10px"); // Not working
buttonGb.setHeight("10px"); // Not working
buttonGb.addClickListener(new ClickListener() {
containerLocale.addComponent(buttonGb);
Hi Simon,
the following works for me:
Button iconLink = new Button(new ThemeResource("my/path/logo.png"));
iconLink.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
iconLink.addStyleName(ValoTheme.BUTTON_BORDERLESS);
iconLink.setHeight(245, Unit.PIXELS); // logo.png Height
iconLink.setWidth(400, Unit.PIXELS); // logo.png Width
iconLink.addClickListener(new ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
UI.getCurrent().getPage().open("https://www.google.com", "_new", false);
}
});
regards
Johannes
Thanks for your answer Johannes!
Still got the same Problem.
public class TestView extends AbsoluteLayout {
public TestView () {
setSizeFull();
final Component localeSelection = buildLocaleSelection();
addComponent(localeSelection, "left: 10px; top:10px");
}
private Component buildLocaleSelection() {
final GridLayout containerLocale = new GridLayout(2, 1);
containerLocale.setSpacing(true);
containerLocale.setSizeUndefined();
final Button buttonDe = new Button();
buttonDe.setIcon(new ThemeResource("img/DE.svg"));
buttonDe.setStyleName(ValoTheme.BUTTON_ICON_ONLY);
buttonDe.setStyleName(ValoTheme.BUTTON_BORDERLESS);
buttonDe.setWidth(20, Unit.PIXELS);
buttonDe.setHeight(20, Unit.PIXELS);
buttonDe.addClickListener(new ClickListener() {
@Override
public void buttonClick(final ClickEvent event) {
// ...
}
});
containerLocale.addComponent(buttonDe, 0, 0);
return containerLocale;
}
}
Hi Simon,
can you try replacing "setStyleName(..)" with "addStyleName(..)"?
"setStyleName(..)" overrides all custom class selectors you define, which means that only one style gets applied to your Button.
regards
Johannes