Constraints in Axure 10


#1

Constraints seem to be working when resizing groups on the canvas but not during preview. For example, if I set a widget to be a fixed distance from the right edge of a group, it will maintain the fixed distance as I am resizing the group on the canvas. However, when I go to preview it and I have set the size of the group to change as I’m changing the size of the browser window, the distance of the widget from the right edge of the group is no longer fixed but scales linearly with the size of the group. Is this a bug or is that really how it’s supposed to work?


#2

Hi @jkuo, thanks for trying out RP 10! Constraints haven’t been implemented in the browser yet, but we are planning to add this functionality.


#3

Do constraints work so that if you change the amount of text in e.g. a ‘Paragraph’ widget, the other items will automatically move to keep the original spacing between that element and themselves? For example, if I’m mocking up a modal dialogue with an icon, a heading, some paragraph text and a button, but I want to change the paragraph text - is it possible to set it that the other widgets will remain e.g. 24 pixels below the paragraph text? Something like Figma’s auto layout.


#4

Hi @scotindisguise, I believe what you describe would best be solved using the new “Fit to text height” feature in Axure 10. When this is enabled in the Style panel for the ‘Paragraph’ widget in your example, you can then query the height of the widget, and then use that value to move the other widgets below based on that height value to maintain the original spacing no matter how large your paragraph gets.

It would be wonderful if we can just set the constraints of the other widgets based on the group size so that all you have to do is set the height of the group and all widgets that have a constraint applied would move accordingly, but apparently, setting the constraints currently has no effect when changing the size of the group in the browser preview. Hopefully, that functionality will be implemented soon, as it would greatly facilitate our ability to create responsive designs.


#6

Thank you @jkuo. I tried it (I found the ‘Fit to text height’), but it didn’t seem to work as I would have expected it to. When I tried much shorter text, or much longer text in the paragraph widget, the other widgets didn’t move accordingly. :confused: Maybe I’m doing something wrong?


#7

@scotindisguise, as far as I know, there isn’t a way for other widgets to move automatically based on the height of a text widget. You would have to explicitly set them to move based on the height of the Paragraph widget after you’ve set the text. This can be done by setting a local variable to the Paragraph widget first, and assuming your local variable name is LVAR1, you can get the height of the widget by using the expression [[LVAR1.height]]. Once you have that, you then have to use the Move command for all other widgets below the paragraph widget to actually move them vertically down by the height of the Paragraph widget, for example.


#8

Thank you for getting back to me. That’s a shame!


#9

Hey, @Rachel any ideas when this will be added to the browser? I’ve just spent the last hour wondering what I was doing wrong before finding this thread.


#10

Still looking for this feature to be implemented in Preview on Aug 11. Any ETA?


#11

This is such a handy feature in the editor and would be SOOO very helpful for making dynamic stuff happen in the browser.

It’s been nearly a year since @Rachel mentioned they had plans to implement this in the preview for browsers. Does anyone from Axure have an updated ETA? I can’t wait! :slight_smile: