Unable to center vertically a form (sample code provided)

Hi,
I feel I ‘am very close to achieve the
centering
(Vertically & Horizontally) of my first login form.
I’ve read some posts related with this issue, but their proposals don’t work for me.
Could somebody help me with my code?
(Thanks)

Here a simplification of my code. Note that I want to
avoid use of LoginForm
and that I need extra
vLayout
for styling issues:

public class PanelLogin extends CustomComponent {

	private VerticalLayout mainLayout;

	public PanelLogin() {		
		buildMainLayout();
		setCompositionRoot(mainLayout);
	}

	private void buildMainLayout() {
		Embedded logo = new Embedded(null, new ThemeResource("img/logoGrande.png"));
			logo.setType(Embedded.TYPE_IMAGE);
															
		FormLayout loginForm = new FormLayout();
			loginForm.addComponent(new TextField("Username"));
			loginForm.addComponent(new PasswordField("Password"));
			loginForm.addComponent(new Button("Login"));

		Panel panelForm = new Panel("Login...");
			panelForm.setContent(loginForm);
			panelForm.setWidth(null);
						
		VerticalLayout vLayout = new VerticalLayout();
			vLayout.addComponent(logo);
			vLayout.addComponent(panelForm);
			vLayout.setComponentAlignment(logo, Alignment.TOP_CENTER);
			vLayout.setComponentAlignment(panelForm, Alignment.MIDDLE_CENTER);
			vLayout.setWidth(null);
						
		mainLayout = new VerticalLayout();	
			mainLayout.addComponent(vLayout);
			mainLayout.setComponentAlignment(vLayout, Alignment.MIDDLE_CENTER);
	}
				
}

11764.png

Hi,

Perhaps if you setSizeFull() both your mainLayout and the CustomComponent?

mainLayout.setSizeFull();
setSizeFull();

Best Regards,
Marc

BINGOO!
that do the trick!