Centering LoginForm? HOWTO article doesn't work.

Vaadin 6 / 7 / 8 Framework UI
1

Hello; I’ve attempted to do my homework. I read
the article on centering boxes
, but this did not seem to help.

I’m attempting to put a LoginForm on the center of the screen.

My (layout) code (in my application’s init() method) looks like this:


    final VerticalLayout layout = new VerticalLayout();
    layout.setSizeFull();

    this.mainWindow = new Window("My application", layout);
    this.setMainWindow(this.mainWindow);

    final LoginForm loginForm = new LoginForm();
    loginForm.addListener(new LoginForm.LoginListener() {
      // listener code omitted for brevity
      });

    loginForm.setHeight(400);
    loginForm.setWidth(400);
    layout.addComponent(loginForm);
    layout.setComponentAlignment(loginForm, VerticalLayout.ALIGNMENT_HORIZONTAL_CENTER, VerticalLayout.ALIGNMENT_VERTICAL_CENTER);

This results in a login form showing up in the upper left hand corner of the screen.

Thoughts?

My apologies if this is an obvious question; pointers to further (excellent) documentation welcomed.

Best,
Laird

2

I believe that the centering article is out of date.

When I change my code so that I use Alignment.MIDDLE_CENTER …then my code works.

The important change is this:

layout.setComponentAlignment(loginForm, Alignment.MIDDLE_CENTER);

The article has this:

layout.setComponentAlignment(loginForm, VerticalLayout.ALIGNMENT_HORIZONTAL_CENTER, VerticalLayout.ALIGNMENT_VERTICAL_CENTER);

In addition I was setting my width and height using the double version, not the String version. I now set my LoginForm’s width and height like this:

loginForm.setWidth("400px");
loginForm.setHeight("400px");

I hope this helps someone else with the same problem.

Best,
Laird