Vaadin FormLayout does not align centered

Question

I have a VerticalLayout wrapping a Label and a FormLayout. The VerticalLayout aligns its components centered per default. The Label is aligned centered as expected. The FormLayout not.

When I look at the component tree in the debug view the FormLayout has a width, spanning over the whole width of the VerticalLayout. But its children (textfields) are aligned to the left and have a lower width (I think the default value).

My code:

@SpringView(name = RegisterView.VIEW_NAME)
@DesignRoot
public class RegisterView extends VerticalLayout implements View {

    protected static final String VIEW_NAME = "register";

    @PostConstruct
    void init() {
        setSizeFull();
        setDefaultComponentAlignment(Alignment.MIDDLE_CENTER);
        createUIComponents();
        setSpacing(true);
    }

    private void createUIComponents() {
        addComponent(new Label("HEADER"));
        addComponent(createRegistrationForm());
        addComponent(new Label("TEST"));
    }

    private FormLayout createRegistrationForm() {
        final FormLayout layout = new FormLayout();
        final TextField firstNameTextField = new TextField("firstName");
        final TextField lastnameTextField = new TextField("lastname");
        layout.addComponents(firstNameTextField, lastnameTextField);
        return layout;
}

What am I doing wrong, how can I center the FormLayout inside of the VerticalLayout?

score 2 · Accepted Answer · answered Mar 12 '18 at 08:31

2

I found a solution (although the FormLayout seems to behave strange):

Instead of calling setSizeFull() I call setSizeUndefined() to let the FormLayout just wrap the space it needs for its child components. This allows the wrapping layout to center the FormLayout.

What I was not able to do: I could not set the FormLayout to full width and align its children centered.

answered Mar 12 '18 at 08:31

David Artmann

4,272
1
16
24

I guess full size will set the size according to the screen- fixed size, but undefined will enable wrapping to the parent container, maybe, but sometimes vaadin is strange :D . – xxxvodnikxxx Mar 12 '18 at 11:09

score 0 · Answer 2 · answered Mar 25 '22 at 18:05

I encountered the same issue with Vaadin 23. Using setSizeUndefined() did not work. Instead, I solved it with wrapping the FormLayout inside a HorizontalLayout component.

Solution:

private void createUIComponents() {
    add(new Label("HEADER"));
    add(new HorizontalLayout(createRegistrationForm()));
    //add(createRegistrationForm());
    add(new Label("TEST"));
}

Note: It seems addComponent() is now replaced with add() in newer versions.

Vaadin FormLayout does not align centered

2 Answers2