Fix distances between elements/groups

Hi there!

Is there a way to fix distances between elements/groups so that for example, if you increase the height of one object in Axure then 2 objects above and below it remain the same distance between them and the resized element as they had before?

Like here:

1 Like

If you use dynamic panels, or hide/show different widgets to get the various sizes, then you can look under “MORE OPTIONS” and change “None” to “Push/Pull Widgets” --and ensure all your widgets are well and truly above and below, with no overlapping. This option is not available with the Set Size event.

But, if sizing widgets directly is what you really need to do–and it sounds like it–then you could add a Resized event and Moved event for each widget/group/panel. They would move the widget directly below it (and perhaps above as well if the resizing uses a center-anchor point) by the padding amount. This requires each widget to know what is directly below (and maybe above) but it sets up a kind of atomic or object-oriented approach where a chain of actions gets kicked off.

In your example above, when widget B gets resized (and assuming it grows from its center), it would move Widget A to [[This.top - Target.height - Padding]] and move widget C to [[This.bottom + Padding]] . Then, Widget A’s Moved event would be triggered and it would move the widget above it (if any); Widget C’s *Moved event would be triggered as well, and it would move Widget D, and so forth. I’ve found it best if things grow/shrink in one direction only–meaning, resizing would always be top-anchored, so the movement happens below only. This makes it easier to track/code and keeps the user point of focus more consistent–but of course context may make it better to grow from the center–just be aware things can get weird this way.

These examples use some built-in variables available in Axure, where [[This]] refers to the widget with the event/action code, [[Target]] refers to the widget being acted upon (moved in this case), and [[This.top]] obviously refers to the top or “y-location” property (identical in value to [[This.y]] just easier to read.) Padding would be a Global Variable or Local Variable pointing to the text on some widget. Of course, you could also hard-code a number, like “20” but if you need to ensure consistent distances and be able to easily change from 20 to 30 later on, best to use a variable for that.

More info here:

1 Like