PDA

View Full Version : Centering images with CenterLayout



gheorghi.pentchev
4 Nov 2011, 2:55 PM
Hello!
I'm writing a simple login panel using GXT 2.5.0 with GWT 2.4. I'm trying to center the logo image in a ContentPanel using CenterLayout, as shown in this code fragment:

public class SchermataAutenticazione extends Viewport {

private TextField<String> usernameTextField_;
private TextField<String> passwordTextField_;

public SchermataAutenticazione() {
//setHeaderVisible(false);
setBorders(false);
//setBodyBorder(false);
setLayout(new FlowLayout());
add(getTitleContentPanel());
add(getLoginFormContentPanel());
add(getLogoContentPanel());
}

private ContentPanel getTitleContentPanel() {
ContentPanel cp = new ContentPanel();
cp.setHeaderVisible(false);
//cp.setBorders(false);
//cp.setBodyBorder(false);
cp.setWidth("100%");
cp.setHeight(100);
cp.setLayout(new CenterLayout());
Label l = new Label();
l.setText("Fatturazione Elettronica v1.0");
cp.add(l);
return cp;
}

private ContentPanel getLogoContentPanel() {
ContentPanel cp = new ContentPanel();
cp.setHeaderVisible(false);
//cp.setBorders(false);
//cp.setBodyBorder(false);
cp.setWidth("100%");
cp.setHeight(100);
cp.setLayout(new CenterLayout());
Image i = new Image("./logo.gif");
i.setStyleName("img");
cp.add(i);
return cp;
}

private ContentPanel getLoginFormContentPanel() {
ContentPanel cp = new ContentPanel();
cp.setHeaderVisible(false);
//cp.setBorders(false);
//cp.setBodyBorder(false);
cp.setWidth("100%");
cp.setHeight(160);
cp.setLayout(new CenterLayout());
cp.add(getLoginFormPanel());
return cp;
}

private FormPanel getLoginFormPanel() {
FormData formData = new FormData("0");
FormPanel loginForm = new FormPanel();
loginForm.setHeading("Autenticazione");
loginForm.setFrame(true);
loginForm.setWidth(350);

usernameTextField_ = new TextField<String>();
usernameTextField_.setFieldLabel("Username");
usernameTextField_.getFocusSupport().setPreviousId(loginForm.getButtonBar().getId());
loginForm.add(usernameTextField_, formData);

passwordTextField_ = new TextField<String>();
passwordTextField_.setFieldLabel("Password");
passwordTextField_.setPassword(true);
passwordTextField_.getFocusSupport().setPreviousId(loginForm.getButtonBar().getId());
loginForm.add(passwordTextField_, formData);

Button loginButton = new Button("Login");
loginForm.addButton(loginButton);

loginForm.setButtonAlign(HorizontalAlignment.CENTER);
FormButtonBinding binding = new FormButtonBinding(loginForm);
binding.addButton(loginButton);

return loginForm;
}
}


The problem, as you can see in the attached file, is that on internet explorer the blue square is centered, but on Chrome no. Same behaviour on Firefox.
Any help will be apprecied! Thank you!