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.
Problem with the Alignement of Buttons
Hello,
I have a Problem regarding the Alignement of Buttons in a HorizontalLayout. I want to align one Button on the right side and another on the left.
Here is my Code:
protected Component buildDefaultBottomLayout() {
HorizontalLayout buttonLayout = new HorizontalLayout();
buttonLayout.setSpacing(true);
buttonLayout.addStyleName(ValoTheme.WINDOW_BOTTOM_TOOLBAR);
buttonLayout.setWidth("100%");
Button clear = new Button("Clear all filters");
clear.addClickListener(event -> {
mTable.clearFilters();
});
buttonLayout.addComponent(clear);
if (VaadinSession.getCurrent().getAttribute(User.class).hasPermission(300)) {
Button add = new Button("Add");
add.addStyleName(ValoTheme.BUTTON_FRIENDLY);
add.addClickListener(event -> {
getUI().addWindow(getAddDialog());
});
buttonLayout.addComponent(add);
buttonLayout.setComponentAlignment(add, Alignment.TOP_LEFT);
}
buttonLayout.setComponentAlignment(clear, Alignment.TOP_RIGHT);
return buttonLayout;
}
However both Buttons are positioned in the middle of the HorizontalLayout.
Thanks for any help!
Is there anyone able to help me?
According to the Book it should work with setSpacing(true) but, as you can see, it is not helping.
In the attachment of my post is a picture where you can see the Buttons, but I want one of them on the right side and the other one the left.
You added the clear button first, so it is aligned topRight in the left half of the layout, and the add button is aligned top left in the right half of the layout.
Components are alway added from left to right in the order you add them to a vertical layout.
Setting the alignment does only change the alignment within the slot of the layout your component occupies,
if you first add the add button, and then later add the clear button, your layout will work as expected
Raimund Barbeln: You added the clear button first, so it is aligned topRight in the left half of the layout, and the add button is aligned top left in the right half of the layout.
Components are alway added from left to right in the order you add them to a vertical layout.
Setting the alignment does only change the alignment within the slot of the layout your component occupies,if you first add the add button, and then later add the clear button, your layout will work as expected
Thank you very much!