How to make app pages responsive

Anvil Q&A
1

Hello guys,

I noticed that one of my apps doesn’t display well, isn’t responsive on smaller screens, mainly because I used xy_panels. Please is there a way to make UI elements on my forms responsive on smaller screens? Including xy_panels and elements in xy_panels.

Thanks.

2

Consider what “responsive” means. It means that the on-screen objects’ xy sizes and positions are computed automatically, on-the-fly, by the underlying system.

When you use an XY Panel, however, you explicitly override that automation, for the objects on that panel. In effect, you’re telling the system, “I know better. It’s now my own code’s responsibility to size and position these objects appropriately for each screen size.”

3

Hi @Agobin,

@p.colbert is right - although most of our containers automatically resize to fit mobile screens, XYPanels don’t know how to rearrange your components!

Can I ask why you are using an XYPanel in the first place? Perhaps you can do what you want with a ColumnPanel (which collapses automatically on smaller screens) or a GridPanel (which can be configured).

4

Thanks guys for your responses. I am using an XY panel because it makes it easier to design the layout I want. I’ll look more into the grid panel and maybe the column panel too.

Thanks again.

5

Another approach might be to have different forms for different sizes. I do that where small screens need to lay stuff out very differently.

Goes against the responsive design principles a bit, but you do end up with a much more tailored set of forms.

I mostly use the material template, so my “always open” form has some JS to detect if the page width changes and it sets a property accordingly. Then some logic determines which sub-form to open based on that setting.

Here’s a link to the code :

1 Like