Resize dynamic panel with drag

#1

Hi there,

I’m trying to brush on my Axure skills after a while away and having some difficulty getting a dynamic panel to be resized when another dynamic panel (the drag handle) is dragged along the x axis. Note: I want the box anchored to the right, and be resizable by dragging it’s left edge.

I’ve got the drag handle to move as expected but it isn’t linked to the box that I want to resize - it’s obviously an issue with the variables I’m using but I’m clueless as to what it should be.

Any help would be greatly appreciated!

Cheers

resize container.rp (50.5 KB)

#2

You’re close.

First of all, you would not be able to see the dynamic panel, “Box” resize, other than to see that its contents (the one gray rectangle) would appear to move with the Slider as you dragged it (because by default dynamic panels have a transparent fill.) But, you can directly resize the gray rectangle inside it and since the dynamic panel is set to “Fit to Content” then it’s size will change with the rectangle’s size.

Secondly, you don’t have a local variable defined for LVAR1 in your Set Size action. If you click Add Local Variable in the fx editor and point LVAR1 to the widget, “Box” (which I’ve renamed to “Box Panel”) then you can use its location to calculate the new width of the rectangle widget (which I’ve named “Box”). Here is the algorithm I use in the updated .rp file below:
[[ LVAR1.right - This.left - (This.width/2) ]]

Finally, I added some boundaries to limit the drag. Otherwise, you would be able to move the slider past the box itself, the box would disappear and the slider just moving around aimlessly. I somewhat arbitrarily used the width of the slider, but you can easily change the boundaries to whatever you need.

resize container.rp (51.3 KB)

Creating a "split view" with two dynamic panels with a draggable middle adjuster that resizes each - what's the best approach?
Resizable table column using widget
How to expand rectangle with video content inside
#3

@mbc66 Thank you so much, this is incredibly helpful and works a treat. I’m not sure I would have figured this out myself!

After some thought, I think this is what’s happening in the formula: you subtract the x coordinate of the left edge of the slider (This.left) from the x coordinate of the right edge of the dynamic panel (LVAR1.right) and then also subtract half the width of the slider to ensure that the expansion point sits in the middle of that widget? And this then determines the width of the Box Panel widget when it’s resized?

#4

Yes, you described it well. Note that the “Box” rectangle widget does not need to be in a dynamic panel for this to work. Alternatively, you could style the “Box Panel” dp with a “Back Color” and resize it directly without the need for the “Box” rectangle widget. Just depends on what else you are showing/doing with the resizing.

#5

@mbc66 Thanks for the example! I’ve created same container that resizes to the right side (see attached) and I had to add 200px into the box size calculation (which depends on the x position of the group). I couldn’t figure out why these 200px was needed. Can you have a look please?

ResizeContainer_right.rp (49.0 KB)

#6

Hi @elenamaslovskaya,

I don’t really understand your calculation (but it works :yum:)

Here an other way to calculate it (whitout 200px)

image
image.png1406×793 24.8 KB

The box width is the distance between the beginning of the slider and the panel + the half of your slider:

image
image.png875×590 14.7 KB
[[ This.x-LVAR1.x+This.width/2]]

ResizeContainer_right._editedrp.rp (56.4 KB)

Hope it will help,
Best,

PS: By the way, I used .x, but .left works too

#7

@PierreJ Thanks so much for the example! Nobody understands my calculations, that’s why i’m not a programmer any more :))))
Do you know how to make the content inside DP inside the Box to go full width automatically? I modified your sample and placed 2 boxes there. The box that is inside DP doesn’t go full width, compared to the standalone box.

ResizeContainer_right_with_dp.rp (60.4 KB)

#8

:joy::rofl::rofl::rofl::rofl::joy:

Is here any need to have Dynamic panels?

If no need: add the white box in your “Box Group” and don’t use DP
Else if there really is a use case for it and you would like to resize all the content on this panel, create a groupe for all those items that you will resize.

Because when one resizes a group, all items in the group will be resized,
but if one resizes a Dynamic Panel, only the DP resizes, not it’s content.

Here:
ResizeContainer_right_with_dp_group.rp (61.4 KB)

I grouped your white bloc in “Group in” and make so it’s resized when “Box group” it resized:

image
image.png1896×658 59.9 KB

I don’t know a more automatic way to do it (but maybe someone does :face_with_monocle::star_struck:).

I would love that Axure implement a better way to deal with responsiveness, for instance like Justimind does: you only have to say that the width of your widget is 100% and it will take the size of its container (group or dynamic panel)
image

#9

@PierreJ Thanks so much! :slight_smile: