Centering buttons in FormFooter: rendering issues

In a Vaadin app using a form in a child window for login, I encountered a number of mysterious problems in my attempts to center the OK and Cancel buttons in the form footer. After stripping the codes to a bare minimum, I have identified a number of rendering issues that can be reproduced consistently with the codes below. The problems are as stated below:

  1. The buttons (OK and Cancel) are centered when running with Firefox (tested with v4.0.1). However, they are NOT centered in IE8, Chrome (v14.0.835.163) and Safari (5.1) - they are aligned to the left in all these browsers. Cross browers compatibility issues?
  2. For IE8 only, there is an additional rendering problem: the Cancel button is partially obscured or blocked. My IE8 brower is NOT in IE 7 compatibility mode. This rendering problem disappears when I comment out the line formLayout.setWidth(…). But then centering won’t work even in Firefox.
  3. When the statement "form.setFooter(footerLayout is replaced by “form.getFooter().addComponent(footerLayout)”, the buttons are no longer centered even in Fireforx. Why??
  4. When a seemingly innocent change is made, the footer (the two buttons) disappears altogther with any of the browsers mentioned above (including Firefox). The change is to comment out the line form.setCaption (“…”). Why?? I put in a button click listener with a shortcut key for the OK button for further testing. The OK button (though not appearing) still responds to the shortcut Enter key. So, it seems to be a rendering problem (at least it is consistent across all browsers).

Please advise. Of course, these can all be due to my misunderstaning of how to center buttons in a form footer.


package com.example.testwebapp;

import com.vaadin.Application;
import com.vaadin.ui.*;

public class TestwebappApplication extends Application {
public void init() {

	Window mainWindow = new Window("Testwebapp Application");
	Label label = new Label("Hello, Vaadin user");
	setMainWindow(mainWindow);				// POSITION A: WORK HERE

	mainWindow.addComponent(label);	
	LoginWindow loginWindow = new LoginWindow ("Login");
	mainWindow.addWindow(loginWindow);
}

}

/---------------------------------------------------/

package com.example.testwebapp;

import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Form;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Layout;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

public class LoginWindow extends Window {

private static final long serialVersionUID 	= 1L;

private Form form;
private TextField userID, server;
private Button okButton, cancelButton;


// CONSTRUCTORS

public LoginWindow () {
	this (null);
}
public LoginWindow (String caption) {	

	// Setup window
	if (caption != null) setCaption (caption); 
	else setCaption ("Testing");
	center();							// for centering window		
	VerticalLayout layout = (VerticalLayout) getContent();
	layout.setMargin(true);
	layout.setSpacing(true);
	layout.setSizeUndefined();					// for auto-sizing window
		
	// Setup form and layout its fields
	form = new Form ();
	form.setWidth (null);							// centering - 1
	form.setCaption ("Please enter your credentials:");

	userID = new TextField ("User ID:");
	server = new TextField ("Server:");
	
	Layout formLayout = form.getLayout();
	formLayout.setWidth(null);						// centering - 2

	formLayout.addComponent (userID);
	formLayout.addComponent (server);	

	okButton = new Button("OK");
	cancelButton = new Button("Cancel");
	HorizontalLayout buttonBar = new HorizontalLayout();
	buttonBar.addComponent(okButton); 
	buttonBar.addComponent(cancelButton);

	HorizontalLayout footerLayout = new HorizontalLayout();
	footerLayout.addComponent(buttonBar);
	footerLayout.setWidth("100%");						// centering - 3A
	footerLayout.setComponentAlignment(buttonBar, Alignment.BOTTOM_CENTER);		// centering - 3B				
	layout.addComponent (form);
	
	form.setFooter(footerLayout);						// centering - 4
	//form.getFooter().addComponent(footerLayout);

	
	// Set focus to a form field when window is first displayed
	userID.focus();
}

}