Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Positioning your components central on the browser
Hi guys,
this should probably be an easier question for the folks with more experience :-).
I'm currently trying to get my components somehow centered in my application and found nothing understandable during my ongoing research yet.
So that for example this code gets its components centered, and not on the left side.
private VerticalLayout buildLoginView() {
loginLayout = new VerticalLayout();
// infoLabel
infoLabel = new Label();
infoLabel.setValue("info");
loginLayout.addComponent(infoLabel);
// loginForm
loginForm = new LoginForm();
loginForm.setStyleName("v-loginform");
loginLayout.addComponent(loginForm);
// registerButton
registerButton = new Button();
registerButton.setCaption("Register");
loginLayout.addComponent(registerButton);
return loginLayout;
}
I've removed the listeners for achieving a better readability here.
I have tried adding
loginLayout.setComponentAlignment(infoLabel, Alignment.TOP_CENTER);
loginLayout.setComponentAlignment(loginForm, Alignment.MIDDLE_CENTER);
before retunring the loginLayout, but it did not work :-(.
So if anyone of you could help me, I'd be very happy and thankful.
I dont know yet how it works with this .css-files that can be added, so if we could find a java-solution, it'd be great
Thanks a lot!
You will need to add infoLabel.setSizeUndefined() because by default labels are using 100% of the width.
You may have to do it for the login form, I am not sure.
You don't have to do it for button.
Finally, loginLayout need to be set to use all the width (otherwise it will just scale until the biggest component fits inside) with loginLayout.setSizeFull()
Depending on what you do to loginLayout, you may have to apply setSizeFull to it's parent.
To help with this kind of problem, you can add ?debug to the URL and then click on "AL" or "Analyse Layout" in the small debug window, it will display all layouts problems in the current page so you can fix them quickly.