Resizing widget isn't working correctly

#1

I have 4 titles and a line that’s supposed to move and resize under each title. For example, if I click on the 2nd title then the line moves underneath and resizes to the same width. But when I click on the 3rd title which has a width of 105px, the line resizes a to maybe about 40px. Also, it seems to center in the middle of the title even though the anchor is set to top left. If I set the anchor to top then it aligns with the title on the left. If I resize to a smaller size width-wise, the line becomes shorter height-wise. If I make it larger, the height stays the same.

It’s obviously kooky behavior. I’ve created a new Axure file to separate these 5 widgets by themselves. I’ve also reduced it down to one title and the line and it still produces that strange behavior.

Edit: To reiterate, resizing adversely affects line width, line height, and line alignment.

Screen Shot 2019-01-22 at 9.26.10 AM.png1978×672 86.4 KB

Screen Shot 2019-01-22 at 10.29.16 AM.png1910×794 63.6 KB

Screen Shot 2019-01-22 at 10.30.32 AM.png1910×794 54.9 KB

#2

Hi!

Since you are placing the line based on its top-left coordinate, you should be sizing the line using the top-left anchor rather than the center.

The fact that it’s not going the full width is concerning. Rather than using hard-coded numbers I tend to use [[This.left]] and [[This.width]] for the moving and sizing: that way everything still works if you move the labels.

It works okay for me, though what it considers left-alignment seems to be one pixel off.

size_line.rp (44.4 KB)

If you change it and still have problems, you should post it here (or contact support).

#3

Hi pixeler!

Hmm, I’ve been able to reproduce these odd behaviors as well, but only in a Safari web browser. Did you encounter this issue while using any other web browsers? Because this behavior is unexpected, I will be filing a bug report with our respective teams regarding these issues.

I also wanted to let you know that I tested these interactions out with shape widgets rather than with lines, and found that using shape widgets does not show any unexpected behavior when the widget is resized. If you needed to continue using Safari while this issue is being investigated, you could swap out your line widget for a rectangular shape widget instead.

I hope that helps!

#4

Thanks Chelsea, I can confirm it works as intended in Chrome regarding alignment, line width, and line height.

Edit: In addition, I can also confirm josephxbrick’s statement about horizontal movement being off by one pixel.

#5

Hi pixeler!

Thanks so much for letting me know that it’s working correctly in Chrome! And I agree, it does look like the line widgets are off by a pixel in this case. After some additional testing, I’ve found that this occurs with lines with larger border sizes, even when the widget is not moved or resized. For example, the left-hand end of a line widget at a x location of “0” can render as if it’s in negative horizontal space if the border size is larger than “1”.

I’ll be filing a separate report regarding this issue, since it seems to occur outside of line widget resizing and move actions, and in multiple web browsers, instead of only in Safari.

Thanks pixeler and josephxbricks for catching this behavior!