javalayoutvaadinvaadin8

Vaadin FormLayout does not align centered


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?


Solution

  • 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.