Problem with Vaadin 6.7.6 Layout Alignment in IE6 with Liferay 6.1GA2

[Chethan Barike, modificado 11 Anos atrás.]

Hi All,

I supposed to get the horizontal layout to be center aligned within a vertical layout. But its aligning to left side always only in IE6.
In other browsers it works fine.

PFA screenshot for IE6 and chrome.

Pls find the sample code for the same.
Also PFA eclipse project, war file, vaadin widgetset 6.7.6 (to place in ROOT/html/VAADIN folder)

public class Ie6Application extends Application {
	@Override
	public void init() {
		Window mainWindow = new Window("Vadinie6 Application");
		setMainWindow(mainWindow);		
		mainWindow.setWidth("700px");
		
		VerticalLayout verticalLayout1= new VerticalLayout();
		verticalLayout1.setSizeFull();
		
		HorizontalLayout horizontalLayout1= new HorizontalLayout();
		
		Button button1= new Button("button11");
		Button button2= new Button("button21");
		Button button3= new Button("button31");
		
		Label label1=new Label("Label");
		
		horizontalLayout1.addComponent(button1);
		horizontalLayout1.addComponent(button2);
		horizontalLayout1.addComponent(button3);
		horizontalLayout1.addComponent(label1);
				
		verticalLayout1.addComponent(horizontalLayout1);
		verticalLayout1.setComponentAlignment(horizontalLayout1, Alignment.TOP_CENTER);
		
		mainWindow.addComponent(verticalLayout1);
		
		
	}

}

Anybody help me out in resolving this problem.

[David H Nebinger, modificado 11 Anos atrás.]

First, upgrade immediately to 6.8.10 (include deployment of the special liferay deployment package).

Nobody uses or stays with old versions of Vaadin. Each version includes bugfixes as well as theme fixes. Sticking with such an old version means you don't want to use these updates which may already have a solution for your problem.

Second, IE6 is on the verge of being deprecated. It is quite reasonable to expect waning support for IE6 from Vaadin.

If you need to support IE6 and you've upgraded to the latest 6.8.10 and you still have the problem, I'd try one of two things:

1. change the horiz layout to be 100% width, then align the elements within the horizontal layout (this often will work when the other fails).

2. create a custom vaadin theme. This is actually pretty involved, but it is the best way to resolve one-off sort of rendering issues.

[Chethan Barike, modificado 11 Anos atrás.]

Thanks for reply David,

I still have the same problem with 6.8.10.

As you said if I make horizontal layout to be 100% and align the component within that, Alignment functionality works.
This is okay if I place only 2 buttons within horizontal layout. one button being right aligned and other being left aligned. using below code

		HorizontalLayout horizontalLayout1= new HorizontalLayout();
		horizontalLayout1.setWidth("100%");
		TextField button1= new TextField("button111");
		TextField button2= new TextField("button211");	
		
		horizontalLayout1.addComponent(button1);
		horizontalLayout1.addComponent(button2);		
		
		horizontalLayout1.setComponentAlignment(button1, Alignment.TOP_RIGHT);
		horizontalLayout1.setComponentAlignment(button2, Alignment.TOP_LEFT);

So in that 100% horizontal layout, 2 button together will be at center.

But If I have 3 or more than 3 buttons / components.. I will not be able put all the button in center in IE6. using below code.

HorizontalLayout horizontalLayout1= new HorizontalLayout();
     
Button button1= new Button("button11");
Button button2= new Button("button21");
Button button3= new Button("button31");
       
horizontalLayout1.addComponent(button1);
horizontalLayout1.addComponent(button2);
horizontalLayout1.addComponent(button3);
              
verticalLayout1.addComponent(horizontalLayout1);
verticalLayout1.setComponentAlignment(horizontalLayout1, Alignment.TOP_CENTER);

This problem occurs only if I use vaadin as a Liferay portlet only.
Vaadin as a servlet works fine in IE6.

PFA screenshot of IE6 developer. Here margin-left:355px (generated by Alignment.TOP_CENTER) is not getting applied.

Please advise me which CSS class I've can override or any other suggestion to resolve this problem.

BR,
Chethan

[Chethan Barike, modificado 11 Anos atrás.]

Hai David,

If I use Liferay freefrom Layout, This problem will get resolved.
And also alignment works fine within Vaadin popup window.

Can you please guess what might be the problem with the liferay layout with vaadin in IE6 ???

Thanks & Regards,
Chethan

[David H Nebinger, modificado 11 Anos atrás.]

The problem is that the Liferay theme and the Vaadin theme do not actually work together, they are actually at odds with each other, and the Liferay theme has priority...

Liferay loads it's theme when the page is loaded, then Vaadin is dropped in and pulls up it's theme and applies it. The Vaadin theme assumes there is no other competing stylesheet running the page, so it's styles are built from a blank browser state; it doesn't try to 'undo' whatever styling has already been applied in the browser because it doesn't expect any other styling to be there...

That's why it looks fine as a regular Vaadin servlet - it's just the Vaadin theme and no other competing theme getting in the way.

On the Liferay side, the Liferay theme has already styled some of the outer elements, and the Vaadin theme doesn't try to undo the styling. So Vaadin kind of assumes that what it's rendering will end up being centered, but the controlling Liferay theme has something in there to force it to be left-justified.

So that's the problem, but how do you solve it?

The best way is to compare the styling applied as a Vaadin servlet and again as a Vaadin portlet. I like to use Chrome for this kind of analysis because you can actually see the styles applied by the rule and the stylesheet filename.

Find the extra styling applied in the portlet level. Note that sometimes the style that is affecting your layout is at a higher DOM element than the one you're looking at.

Anyway, this will give you a list of styles that you need to undo. From here you can either a) modify the VAADIN/themes/liferay/styles.css file (to adjust the Liferay theme directly) or b) create your own theme. I tend to do the former because I just want my Vaadin portlets to work and don't want to have to choose a different theme all the time, but it does add one further challenge for upgrading Vaadin to a new version.

Then find the elements in the styles.css file which are defining the Vaadin theme. Add in styles to 'undo' whatever the Liferay theme has applied...