Button Alignment in Horizontal Layout

Flow
1

Hi,

iam stuck at some maybe simple thing in Vaadin 10.

I have a Horizontal Layout with two Buttons. One for saving the fields and one to close the dialog.
Now i want to align the save button to the left and the close button to the right.

In Vaadin 8 i set the layout to fullSize ord maxwidth and then use this:

myHorizontalLayout.setComponentAlignment(myButton1, Alignment.LEFT)
myHorizontalLayout.setComponentAlignment(myButton2, Alignment.Right)

This is not possible anymore. Their are no function for this or i dont see it.

2

Have you tried:

myHorizontalLayout.setAlignSelf(myButton1, FlexComponent.Alignment.START)
myHorizontalLayout.setAlignSelf(myButton2, FlexComponent.Alignment.END)
3

Did this but does not work. Did not get yours work. What ist FlexComponent?

myHorizontalLayout.setAlignSelf(Alignment.START, myButton1)
myHorizontalLayout.setAlignSelf(Alignment.END, myButton2)
4

Hi Nils-Florian Krüger,

The solution to that problem is to use margin-left:auto in the CSS of that element.

A left or right margin with auto will take up all of the “available” space making the element look like it has been flushed right or left.

btn.getElement().getStyle().set("margin-left", "auto")
5

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

And for some reason I only have setVerticalComponentAlignment() in the HorizontalLayout().

6

Hi Diego Sanz Villafruela,

you made my day. Its a bit different for me because i don´t use html, css or templates. I do all in pure java so for me its:

rightButton.getStyle().set("margin-left", "auto");

But never the less your Solution brings what i wanted. Iam very happy with it thanks a lot.

@Hayden, yes it is like you said an i dont know why :D. Make no sense for me to have only vertical Alignment in an Horizontal Component.

7

FYI, there’s a pure JAVA solution on Vaadin 14, which is explained in the [Layouting tutorial]
(https://vaadin.com/learn/training/v14-layouting). Starting at page 50 of the tutorial’s handout PDF, there’s an example for implementing left and right aligned components inside a HorizontalLayout. Page 51 shows a pure JAVA solution, as in the following confirmation dialog example:

  Dialog    confirmDialog = new Dialog();
  Paragraph confirmText   = new Paragraph("Are you sure you want to leave this page?");
  Button    confirmButton = new Button("Confirm");
  Button    cancelButton  = new Button("Cancel");
  
  // Add a FlexLayout wrapper for the element you want to right align
  FlexLayout cancelButtonWrapper = new FlexLayout(cancelButton);
  
  // Set the wrapper flex alignment to end (right)
  cancelButtonWrapper.setJustifyContentMode(JustifyContentMode.END);

  // Create the HorizontalLayout and expand the wrapper component
  HorizontalLayout dialogButtons = new HorizontalLayout(confirmButton, cancelButtonWrapper);
  dialogButtons.expand(cancelButtonWrapper);

  // Add the components to the dialog
  confirmDialog.add(confirmText, dialogButtons);
  confirmDialog.open();

At page 52 the CSS solution is mentioned as an alternative.

8

Maybe have no more place in the Layout. The solution as below worked for me

myHorizontalLayout.setComponentAlignment(myButton2, Alignment.MIDDLE_RIGHT);
myHorizontalLayout.setExpandRatio(myButton2, 1.0f);
myHorizontalLayout.setWidth("100%");

Hope that can help!

9

Diego Sanz Villafruela:
Hi Nils-Florian Krüger,

The solution to that problem is to use margin-left:auto in the CSS of that element.

A left or right margin with auto will take up all of the “available” space making the element look like it has been flushed right or left.

btn.getElement().getStyle().set("margin-left", "auto")

Muchas gracias, simplemente funciona

10

Another option for two buttons is:

        Button cancel = new Button("Cancel");
        Button save = new Button("Save");    	
        HorizontalLayout buttonLayout = new HorizontalLayout();
        buttonLayout.setJustifyContentMode(JustifyContentMode.BETWEEN);
        buttonLayout.add(save, cancel);