Auto-fitting UI elements to different phone resolutions

#1

Hi all,

I’ve been away from prototyping for a while, but I’m building something new and I’m returning to the forums for the great help I always seem to get here :slight_smile:

Using Axure 8

I am familiar with the Adaptive views feature to define the threshold for different device types, but I’m wondering if there is a way to optimize UI widget locations when there are slight differences in the width and height of different types of phones.

As a simple example/question:

Is there a way to create a Dynamic Panel and have it automatically resize itself to the full height and full width of the device on Load, and then have all the widgets automatically move to a fixed position based on the edges? (For example, have a lower CTA button always be -50px from the right and always -50px from the bottom, calculated after the dynamic panel has resized to the full dimensions of the device?

It’s a relatively simple UI I’m building … so I’m hoping this is possible.

Thanks!

#2

Yes, you can size a dynamic panel using its OnLoad event or the OnPageLoad event–just call the “Set Size” action and use the built-in [[Window.width]] variable and [[Target.height]] to keep the height of your dynamic panel the same. You can also use the OnWindowResize and/or OnAdaptiveViewChange events to access the current Window.width (width of browser viewport). This should allow the dynamic panel to resize fluidly as the browser width changes.

Then make use of the dynamic panel’s OnResize event to move the widgets inside it. There are some other nice built-in variables you can access, like [[This.width]], [[This.left]] etc. Look under the “Insert Variable or Function…” link in the “Edit Value” dialog (usually available from the “fx” button in the Case Editor.

In the past, I’ve found it better to resize a widget inside a dynamic panel–like a background rectangle or hotspot and keep the dynamic panel property of “Fit to Content” checked on. It’s been awhile since I’ve needed to do this… Let me know if you want me to dig up or create a demo for you.