GridLayout misbehaving in Vaadin 7

Vaadin 6 / 7 / 8
1

I am currently migrating from Vaadin 6 to Vaadin 7, and the problem I have at the moment is that my login screen is incorrectly displayed. What my problem looks like can be seen in the attachments (Login_korr is what the layout should look like). After 2 days of trying every suggested fix I could find, I still have no idea why the GridLayout behaves like this. I tried doing it with a VerticalLayout, which worked, but is too much to change, because the layout issue is in every spot a GridLayout is used.
The following code is everything that happens on the login screen:

public Login()
{
Login.setLocaleLanguage(Login.getLocaleLanguage() != null ? Login.getLocaleLanguage() : Locale.GERMAN);
nba = (NBA) AppModel.getApplication();
uiFactory = new UIFactory();
defineServices();
VerticalLayout verticalLayout = buildMainLayout();
chbMerken.setValue(false);
if (nba.cookieSessionId != null && nba.cookieSessionId.length() > 0 && nba.cookieUserPk != null && nba.cookieUserPk.length() > 0) {
try {
userByPermSessionId = userService.findZ_userByPk(Integer.parseInt(nba.cookieUserPk));
} catch (NumberFormatException | BNException | EJBTransactionRolledbackException e) {
}
// now compare saved SessionId with cookie-sessionId, if return-Object isn’t null
if (userByPermSessionId != null && userByPermSessionId.getPermsessionid() != null
&& BCrypt.checkpw(nba.cookieSessionId, userByPermSessionId.getPermsessionid())) {
// check, if permission is expired
if (DateFunctions.getUTCDate().getTime() <= userByPermSessionId.getPermsessionexpiration().getTime()) {
tfUsername.setValue(userByPermSessionId.getLoginname());
pfPassword.setValue(" ");
chbMerken.setValue(true);
}
}
}

// setSizeFull();
setSizeFull();
verticalLayout.setWidth(“500px”);
addComponent(verticalLayout);
if (lbPoweredByOouyea != null) {
mainLayout.setComponentAlignment(lbPoweredByOouyea, Alignment.TOP_CENTER);
}
setComponentAlignment(verticalLayout, Alignment.MIDDLE_RIGHT);
}

private VerticalLayout buildMainLayout() {
// common part: create layout
mainLayout = uiFactory.createVerticalLayout();
mainLayout.setStyleName(“megavl”);
mainLayout.setSpacing(true);
mainLayout.setMargin(true);

    // top-level component properties
     setWidth("100.0%");
     setHeight("100.0%");

    // gridLayout_1

// GridLayout gridLayout_1 = buildGridLayout_1();
GridLayout gridLayout_1 = buildGridLayout_1();
createAndAddLogo(nba.defaultTheme);

    Label spacer = uiFactory.createLabel(null);
    spacer.setHeight("20px");
    mainLayout.addComponent(spacer);

    Panel pn = uiFactory.createPanel("");
    pn.setStyleName("megapanel");
    pn.setSizeFull();
    pn.setHeight("300px");

    VerticalLayout vl = uiFactory.createVerticalLayout();
    vl.setSizeFull();
    vl.addComponent(gridLayout_1);
    vl.setComponentAlignment(gridLayout_1, Alignment.MIDDLE_CENTER);

    pn.setContent(vl);
    mainLayout.addComponent(pn);
    
    //VERSUCH
    mainLayout.setComponentAlignment(pn, Alignment.MIDDLE_CENTER);

    createAndAddPoweredby();

    return mainLayout;
}

public VerticalLayout createVerticalLayout(String styleName) {
VerticalLayout result = new VerticalLayout();
result.setImmediate(false);
result.setWidth(“100.0%”);
result.setHeight(“-1px”);
result.setMargin(false);
result.setSpacing(true);
if (styleName != null) {
result.setStyleName(styleName);
}
return result;
}

private GridLayout buildGridLayout_1() {
// common part: create layout
GridLayout gridLayout_1 = new GridLayout();//uiFactory.createGridLayout();
gridLayout_1.setSizeFull();
gridLayout_1.setSpacing(true);
gridLayout_1.setMargin(true);
gridLayout_1.setStyleName(“logingrid”);
gridLayout_1.setColumns(2);
gridLayout_1.setRows(8);

    Label caption = new Label("Anmeldung");//uiFactory.createLabel("login_title");
    caption.setStyleName("loginheadline");
    gridLayout_1.addComponent(caption, 0, 0, 1, 0);
    gridLayout_1.setComponentAlignment(caption, Alignment.MIDDLE_CENTER);

    // lbBenutzername
    Label lbBenutzername = new Label("Benutzername");//uiFactory.createLabel("benutzername");
    gridLayout_1.addComponent(lbBenutzername, 0, 1);
    gridLayout_1.setComponentAlignment(lbBenutzername, Alignment.MIDDLE_RIGHT);

    // tiBenutzername
    tfUsername = new TextField();//uiFactory.createRequiredTextField(null, null, 30);
    tfUsername.setCursorPosition(0);
    tfUsername.setStyleName("loginform");
    // tiBenutzername.setWidth("250px");
    gridLayout_1.addComponent(tfUsername, 1, 1);
    gridLayout_1.setComponentAlignment(tfUsername, Alignment.MIDDLE_LEFT);

    // lbPasswort
    Label lbPasswort = new Label("Passwort");//uiFactory.createLabel("passwort");
    gridLayout_1.addComponent(lbPasswort, 0, 2);
    gridLayout_1.setComponentAlignment(lbPasswort, Alignment.MIDDLE_RIGHT);

    // tiPasswort
    pfPassword = new PasswordField();//uiFactory.createPasswordField();
    pfPassword.setStyleName("loginform");
    pfPassword.addShortcutListener(new ShortcutListener("Shortcut Name", ShortcutAction.KeyCode.ENTER, null) {
        private static final long serialVersionUID = 3601642341705694472L;

        @Override
        public void handleAction(Object sender, Object target) {
            checkLogin();
        }
    });
    gridLayout_1.addComponent(pfPassword, 1, 2);
    gridLayout_1.setComponentAlignment(pfPassword, Alignment.MIDDLE_LEFT);

    // password reset
HorizontalLayout hlResetPassword = new HorizontalLayout();//uiFactory.createHorizontalLayout();
hlResetPassword.addLayoutClickListener(new LayoutClickListener() {
    private static final long serialVersionUID = -6131089921825563746L;

    @Override
    public void layoutClick(LayoutEvents.LayoutClickEvent event) {
    
    passwordReset();
    }
});

lbResetPassword = new Label("Reset Password");//uiFactory.createLabel("reset_password");
lbResetPassword.setDescription(Messages.getTooltipString("login_reset_password"));

if ("!reset_password!".equals(lbResetPassword.getCaption())) {
    lbResetPassword.setCaption("Passwort zur\u00FCcksetzen");
}
hlResetPassword.addComponent(lbResetPassword);
    hlResetPassword.setComponentAlignment(lbResetPassword, Alignment.MIDDLE_CENTER);
gridLayout_1.addComponent(hlResetPassword, 0, 3, 1, 3);
    gridLayout_1.setComponentAlignment(hlResetPassword, Alignment.MIDDLE_CENTER);

    // chbMerken
    chbMerken = new CheckBox("Daten merken");//uiFactory.createCheckBox("datenmerken");
    gridLayout_1.addComponent(chbMerken, 0, 4, 1, 4);
    gridLayout_1.setComponentAlignment(chbMerken, Alignment.MIDDLE_CENTER);

    // btnAnmelden

// btnLogon = uiFactory.createEnabledButton(“anmelden”, new ClickListener() {
btnLogon = new Button(“Anmelden”, new ClickListener() {

        private static final long serialVersionUID = -8263590240563130212L;

        @Override
        public void buttonClick(ClickEvent event) {
            checkLogin();
        }
    });
    btnLogon.setStyleName("loginbutton");

    gridLayout_1.addComponent(btnLogon, 0, 5, 1, 5);
    gridLayout_1.setComponentAlignment(btnLogon, Alignment.MIDDLE_CENTER);

    // Language switch buttons
    HorizontalLayout hlLanguages = new HorizontalLayout();//uiFactory.createHorizontalLayout();
    hlLanguages.setSizeUndefined();

    addLanguage(hlLanguages, "Deutsch", Locale.GERMAN);
    hlLanguages.addComponent(new Label("|"));

    addLanguage(hlLanguages, "English", Locale.ENGLISH);
    hlLanguages.addComponent(new Label("|"));

    addLanguage(hlLanguages, "slovenia", new Locale("sl", "SI"));
    gridLayout_1.addComponent(hlLanguages, 0, 7, 1, 7);
    gridLayout_1.setComponentAlignment(hlLanguages, Alignment.MIDDLE_CENTER);

    return gridLayout_1;
}

Thanks in advance
20940.png
20941.png

2

There’s quite a lot of code there, so it’s hard to say anything very quickly. I’d suggest that you try narrowing the problem by removing as much as possible to see where the problem occurs.

Also the “analyze layouts” feature in the debug window may help, in case there is some sizing problem with the layouts.