FormLayout Problem in IE6


i have a problem with forms having 100% width fields not rendering correctly in IE6.
If the caption in the first line of the FormLayout is shorter than a following caption, the fields are cut of at the right side.
However, if the field-caption in the first line is the longest, this problem does not occur.

Here is some example code where the problem occurs:

FormLayout fl1 = new FormLayout();
TextField field1 = new TextField("Short caption");
TextField field2 = new TextField("Loooooooooong caption");

field1.setWidth(100, Sizeable.UNITS_PERCENTAGE);
field2.setWidth(100, Sizeable.UNITS_PERCENTAGE);

setMainWindow(new Window(null, fl1));

If you change the field order the problem does not occur:

TextField field1 = new TextField("Loooooooooong caption");
TextField field2 = new TextField("Short caption");


This can be a problem with the flawed box or floating div model in IE6. Resolving this may need analysis on the output divs generated by Vaadin. As a workaround, how about creating a 100% width empty label placeholder before your textfield components?

But if i were you, I would not bother. IE6 has been officially on shutdown. You may be interested in seeing

I will try that thanks.
For now, i solved it by using a gridlayout instead of a formlayout.

Try to tell that my customer :wink:
Alltho almost nobody uses IE6 at home, there are lots of enterprises that will use IE6 for at least 1-2 more years…

Anyway Vaadin 6.x officialy supports IE6, so if thats a bug, i thought it might be of interest for the Vaadin-Devs :slight_smile:

Also i have an webapp with vaadin where IE6 crashes constantly… but im investigating this atm and will post it here too if i think its a bug…


You could
create a bug report
about this with the code demonstrating how to reproduce the problem.