Best way to move an widget's x & y position on adaptive view?

I’ve been using the adaptive view feature for my lastest project, but tbh I found it more time-consuming than just creating my responsive views as different pages… So I want to know if there’s any tips that I missed.
For example, I have 3 buttons on my page, and a widget that would move its x & y position to a new x1 & y1 position based on the selected button. I realized when I finished my base view interaction (1920px) and moved on to a smaller viewport, I couldn’t make the widget move to x2 & y2 position without interfering the based view setting (x1 & y1), even if I unchecked “affect all views”. It just seems like I need a lot of extra screen width logic cases to make it work responsively. (IF 1920 > screen width > 1300, move widget to x:1205 y:475 on click button A; IF 1300 > screen width > 980, move widget to x:856 y: 462 on click button A… etc.)

Is this always the case or did I miss any useful tips to make this less painful?

You can move widgets relative to each other. Using widget properties that you access via local variables, it is possible to move widget 1, then move widget 2 to a position that’s vertically on the same line as widget 1, but 30 pixels to the right of widget 1’s right edge, or whatever.

The .x and .y properties are one way of doing this, but Axure also has .left, .right, .top and .bottom, which I find far more useful.

In your case, if you are moving your widgets around an area which has any reference point (like the top left of an outline you put around where the widgets are displayed), you can use local variables to say ‘Move widget 1 to X + 30 of this reference point and the right edge of this reference point +10px’ or whatever you want to do.

If you want to see this in practice, I recommend uploading your Axure file so members of the forum can demonstrate by editing your file.

2 Likes

.left, .right, .top and .bottom works like a charm! Thanks a lot Dave! I’m also attaching my file here if anyone’s interested in taking a look.adaptive view_move xy.rp (48.4 KB)