How adjust the Vaadin components' vertical alignment in a HorizontalLayout?

Question

I want to align the Button on the same line as the Text Fields. The item alignment has been set to Alignment.CENTER, but as you can see from the image, the vertical centers of the TextFields are lower due to the label on top of them.

    HorizontalLayout horizontalLayout = new HorizontalLayout();
    horizontalLayout.setAlignItems(FlexComponent.Alignment.CENTER);
    Div div = new Div(buttonAddPriceRange);
    horizontalLayout.add(spanneVon, spanneBis, div);

Jens_Jansson_64095 · Answer

layout.setAlignItems(Alignment.BASELINE); allows you to align items by the baseline, that is with the bottom.

HorizontalLayout hl = new HorizontalLayout(new TextField("hello"),
    new Button("world"));
hl.setAlignItems(Alignment.BASELINE);
add(hl);

Check out the great video Master Vaadin VerticalLayout and HorizontalLayout - layouts in Vaadin Flow to learn more.

user_5421484 · Answer

Try ...

horizontalLayout.setAlignItems(FlexComponent.Alignment.BASELINE);

How adjust the Vaadin components' vertical alignment in a HorizontalLayout?

2 Answers