Align Issues when resizing browser


#1

So I am new to Axure. I am trying to make a simple header for a prototype. I have the background as a dynamic panel that is set to 100% of the browser. How can I make elements in that panel that will always be aligned left or right no matter what the size of the browser window is? They seem to be stuck to the size in axure and do not adjust as the browser is resized.


#2

In Axure you can do this via Adaptive Views. You can review the Adaptive Views documentation here:

https://docs.axure.com/axure-rp/pages/adaptive-views/#docsNav

That will create some breakpoints so that page layout adjusts if the screen width is within certain ranges.

If you want the header and its widgets to move continuously and smoothly as the widow width is changed, then you can use the Window Resized event. So, you could put in an action of “Set Size of MyDynamicPanel to [[Window.width]] x, [[Target.height]] y”. Then, in that widget’s Resized event, set some actions to move the individual widgets as needed. The default would be left-aligned. If you want to right-align widgets (and move them on the x-axis only, move them to “[[Window.width - Target.width]], [[Target.y]]” If you want a margin, you can subtract 10 px with this: [[Window.width - Target.width - 10]] --where Target is an internal variable pointing to the target widget of the action. So, if you click on “ButtonA” then “ButtonA” is “This” and if that click moves “Box1” then “Box1” is the Target.

If you want to upload your .rp file I would be happy to take a look and implement this.


closed #3

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.