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