Get started
Loading...
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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8

Problem with the Alignement of Buttons

Surin Th
6 years ago Oct 31, 2015 4:49pm

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!
 

Surin Th
6 years ago Nov 03, 2015 8:25pm

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.

Raimund Barbeln
6 years ago Nov 04, 2015 1:14pm

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

Surin Th
6 years ago Nov 04, 2015 2:33pm

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!