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.
GridLayout misbehaving in Vaadin 7
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
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.