Responsive fullscreen root element


I am currently adding some “responsiveness” to our application and I am stuck with a problem.

The new responsive design feature of 7.2 works great, except it seems it can’t handle overlays in a way I need it.

Following problem:
Depending on the size of the browser window the font size and some layout elements need to shrink to better fit smaller screens. Because the responsive support doesn’t support screen size-based breakpoints, just element sizes, I made the UI responsive. This works quite well with our needs, because the UI is set to full size. Now I encountered a problem with overlays. The overlay container is outside of the div element of the UI and therefore not covered by the responsive selector for the UI.

The problem is that the elements in overlays don’t react to different resolutions. Making single overlays responsive on their own doesn’t help to solve the problem because they are not full screen an don’t scale with the size of browser. The container itself has a size 0x0px and is therefore not usable.

My current idea is to add the Responsive extension to (the UI and the overlay container divs are direct children of the body-tag), but I don’t know how or if it is even possible.

Thank You.


Indeed, the overlay-container element is an issue that I didn’t consider when implementing the Responsive extension. And no, it’s not really possible to add the extension to the body element, since it’s not mapped to any Connector directly.

As a quick workaround, you can use regular CSS media queries to adjust the overlays in your app.

Would you be kind enough to
create a new ticket about this in the Vaadin Trac
? Thanks!

Thank you for your answer. I created a
for the issue.

I allready changed the font size adjustment to the regular CSS media queries and it works quite well. Because we were lazy and built most of our UI structure using Grid-/Vertical-/Horizonal-Layouts, it’s now really hard (read: replace with CssLayout) to adjust everything using css. :frowning:

Thanks for the ticket!

I feel your pain. I can image GridLayout being a stubborn thing to try to override with CSS, but Vertical- and HorizontalLayouts should be doable. If you use expand ratios heavily, then maybe it gets too complicated.

Hi , I have also the same problem

Anaybody knows if a solution has been found ?

The ticket seems to be always open !

Thanks you for your help