Responsive While Dragging?

This may have been asked before but I’m curious to know if it’s possible to create a responsive prototype where the size changes as you drag the lower corner of the browser. Or it is only possible to use breakpoints? I also realize I can use 100% Wide but that creates z-layer problems that I don’t want to be bothered with.

Thanks for your help!

You can use the WINDOW RESIZED event to call Set Size and/or Move actions to control widgets fluidly. Pay close attention to the “anchor” option grid where you can specify how a widget should be resized–e.g., from the top or the bottom-left corner.

There are built-in variables of [[Window.height]] and [[Window.width]] that are very usefui for calculating the size and position of widgets relative to a fluid grid, e.g,. "Set Size of MyHeader to [[Window.width]] x [[Window.height * 20]] anchor top left should ensure the widget named “MyHeader” is always full width and 20% of the window height.

I find it is useful to take an object-oriented approach to create a kind of “chain reaction” effect. So, the WINDOW RESIZED event can set the size of the topmost widget and/or leftmost widget or dynamic panel, and then that widget can have a RESIZED event to change the size and position of the widget/panel next to it, and then this widget could have a RESIZED and/orMOVED event to take care of the next widget below and/or to the right. I’ve also used hotspots (placed behind everything, with no CLICK OR TAP events) to define a grid, and use WINDOW RESIZED to change them, then use the hotspots to control whatever widgets are “in their realm.”

If you use this approach or do any kind of resizing moving dynamically, I highly recommend using dynamic panels instead of groups–so ungroup any and convert to dynamic panels. Any time you move or resize widgets within a group, the (x, y) locations can go haywire–lots of bugs filed for this.

You can use these “fluid resize and move” actions along with adaptive breakpoints, but if you do so you’ll likely need to test for which adaptive view is in effect with a set of conditional cases for your WINDOW RESIZED and RESIZED events.

1 Like

Thank you very much for this. It’s a lot to digest and try. And I will do that and post back in a few days.

Thanks again! :smile: