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?
You would need to ask Vaadin to do a full relayout of its components. This can be done from javascript using window.vaadin.forceLayout(). There is however a small risk that any tables are not properly updated, because they contain special sizing logic for the first time they are rendered, and that logic does not work as expected if the table is inside a div with display: none.
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.
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…