VerticalLayout setAlignItems not working correctly

Flow
1

I have this code:

@Route(value = "registration", autoLayout = false)
@AnonymousAllowed
public class RegistrationForm extends VerticalLayout {

    private FormLayout formLayout = new FormLayout();

    public RegistrationForm() {
        setSizeFull();
        setJustifyContentMode(JustifyContentMode.CENTER);
        setAlignItems(Alignment.CENTER);

        TextArea username = new TextArea();
        username.setPlaceholder("username");
        formLayout.addFormItem(username, "username");

        TextArea password = new TextArea();
        password.setPlaceholder("password");
        formLayout.addFormItem(password, "password");


        formLayout.setWidth("20%");
        add(formLayout);
    }
}

My form is shown at the left side while align items is set to center. But if I add setAlignSelf(Alignment.CENTER, formLayout), it’s shown at the center, as expected.

2

I can confirm that. The problem is, that the form-layout sets an align-self: stretch, which is stronger than the parents align-items.

Can you please create a github issue at: GitHub · Where software is built ?

As a workaround, you can use the following code. That will override the form’s initial setting.

setAlignSelf(Alignment.CENTER, formLayout);