Moving a group of widgets to a certain x/y

I’m trying to get a group of widgets to move to a specific spot on the canvas. Seems like Move > Move to X 30 and Y -22 should do that but it seems conditional on where the user was in terms of scrolling. 14%20PM

So if I’ve scrolled to a certain point it won’t always place it at Y -22 but somewhere relative to how far the user had already scrolled.

I’m trying to move the field the user clicks into (Security answer) as well as the “continue” button below that field to above a Help/hint text box I have sliding up from the bottom of the screen. So I have the interaction triggered On Focus of the Security Answer field.

I also have created a group of all fields that I want moved and found that if I move it to Y -22 in my file it will be in the right place. I don’t totally understanding how the Move to x or y points work, I guess. I don’t want to move by pixels b/c I don’t want it to be relative to where ever the user has scrolled. I tried the boundary option but I’m not totally understanding that either. Attaching my file: App prototype_Mobile_help text fix.rp (648.3 KB)

1 Like

I can understand why you did what you did*, but instead of moving the Fields group, I think what you want to do is scroll the page to a specific spot (anchor.)

This is kind of false and kind of true at the same time… When you move a widget/group to a specific fixed location, like y = -22 then it will get moved to that location–so yes, it will always place it at y = -22. However, the (x, y) coordinates are part of the page, and when the page gets scrolled, those coordinates–the page grid–gets scrolled right along with it. So yes, that location of y = -22 does move relative to how far the page has been scrolled. In other words, the grid is relative to the page, not the screen. Furthermore, it is relative to the page within the prototype viewer, not within your desktop’s browser page. It might help to think of Axure’s mobile prototype viewer as a special kind of iFrame.

Take a look at the 03.03_TEST page in this updated file:

App prototype_Mobile_help text fix.rp (756.9 KB)

First of all, for demonstration purposes I added a few temporary widgets to store the position data of the “Fields” group so when it gets loaded and anytime it moves you can see its actual (x, y) location. When you scroll in the prototype viewer you can see the location of Fields does not actually change, but the .scrollY property of the Window does change. Secondly, I deleted the Move action in the Got Focus event of the “Security Answer” field, replaced it with Scroll to Widget, and placed a Hotspot widget for the page to scroll to. The location of the Hotspot was a bit trial and error (and I’m assuming your “y = -22” meant you really wanted everything to “move up” such that the Continue button appeared just above your help group.) Thirdly, for grins I put a click action on the “Security answer” title and “(required)” text to move Fields to y = -22 and y = 262 (its original location), accordingly, so you can see what happens when you move widgets vs scroll the page.

*This is something that really confused me when I first started trying out the new mobile prototype viewer in RP9 (what you get whenever you set page dimensions in the page STYLE panel.) Namely, “Where is the OnDrag event, and how does it move the page widgets when I drag, and how can I know how much they’ve moved?” Eventually I realized that nothing gets “moved” (at least not relative to the page) but rather the entire web page is getting scrolled. The prototype viewer is simply setting the viewport size–the web page dimensions–and providing a simulated touch-to-scroll experience. (Which in hindsight is a no-duh forehead slapper… :man_facepalming: :laughing: I guess I was too conditioned after many years of simulating my own touchscreen environments via dynamic panels with OnDrag events.)

1 Like

Thank you so much for explaining and setting up the file as you did! :raised_hands:

1 Like