Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Ver 7.5.9 breaks field placement in the grid layout in IE/Edge; fields coll
We had to downgrade to version 7.5.8 (from 7.7.8) because starting with version 7.5.9 of Vaadin IE11/Edge may display fields in the grid layout incorrectly (see below). All fields inside of a grid layout are collapsed into one line. Inspection of the HTML reveals that gridlayout slot divs are missing top/height attributes. The same JSON is sent to the client for both correctly and incorrectly rendered fields which makes us suspect the problem is entirely on the client side.
Factors that could make reproducing this issue difficult:
It happens only in Edge/IE (only tested IE 11)
It only happens when the gridlayout is rendered on the page for the first time (after either navigating to the page or full page refresh). If the gridlayout is replaced with another layout on the same page or the page is resized the fields are rendered correctly.
The problem depends on the browser window size and the height of the gridlayout. It happens quite often but not always and changing either content of the layout or size of the browser window could make it happen or go away.
It seems we have found what caused the problem. It's hard to believe but the fields only get scrambled if the font size of the selected tree node on the left is set to 16px. Changing it to 17px seems to "fix" the problem.