I am starting to make my Vaadin web app responsive. Reading Vaadin docs, I managed to make a CssLayout flexible such that an image is shown either to the left of a text section or in a separate row depending on available width.
Now I want to make my login form flexible. By default, captions are moved to the left of the fields. How can I achieve that the captions are moved to the top of the fields when a certain width is reached? Is that even possible with FormLayout?
Can't really imagine that it is possible with CSS because the FormLayout is rendered as HTML table. If so, what is a simple alternative?
That is not possible with FormLayout. Structure of FormLayout is not flexible. Also there is not simple alternative for that. You can use CssLayout or create your own component container.
Starting point for this can be extending AbstractComponentContainer as described in Creating a simple component container