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.
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.
Thank you for your answer. I created a
ticket 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.
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.
