Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Vaadin rendering in hidden div...
So I put my vaadin app inside of a div that is display:block and it renders fine.
I change the div so it is display:none and use a button click to switch it to display:block, then render the Vaadin app in the div.
When I click the button the div is shown but the Vaadin app is not rendered correctly (tables have the header but only one row is displayed and it's covered by the scrollbars).
What should I do when the div is shown to have Vaadin re-render (resize, whatever) it's content to show itself correctly?
It could work better if you instead used visibility: hidden, as Vaadin will then be able to acquire the proper measurements for its components. To avoid causing a large hole in your html page, you would probably also want to use position: absolute in the same time to take the div out of the normal flow. In this way, you shouldn't need to use forceLayout() either.
That did the trick...
The display:none and display:block switching was certainly throwing Vaadin a curve ball.
Changing to visibility:hidden and visibility:visible in conjunction w/ position:absolute did exactly what I was looking for!
Although I didn't mention it in the OP, I'm actually showing and hiding Vaadin portlets in Liferay now using this technique! Didn't mention it before because I didn't want to overly-complicate the issue...