Dynamic move widget to the right

#1

how do i move a widget to the right of another widget where the width will vary?

#2

You can use Widget Properties to access all kinds of information about a given widget, including its width.

Say for example you have a rectangle that could be 100px wide or 200px wide, and you set its size with a droplist. But you want the widget next to it to always be 20px to the right and vertically in line with it.

There are a number of ways to do this. You can use Push/Pull widgets, but I generally find this unreliable and it doesn’t place nicely with more complex widgets like dynamic panels.

This is how I would do it:

  • Add your reference widget, Rectangle 1
  • Add a droplist and give it two options - Narrow and Wide
  • Add your second widget, Rectangle 2. Place it 20 pixels to the right of Rectangle 1.
  • Add an interaction to the droplist to set the size of rectangle 1. Give it two cases, mapped to the two options in the droplist. Case 1 will set Rectangle 1 to 100px wide. Case 2 will set Rectangle 1 to 200px wide.
  • You can add the ‘Move’ command either to the droplist interactions, or to Rectangle 1 itself, triggered by ‘Resize’. If you add the interactions to Rectangle 1, you can just reference ‘This’ instead of having to create a local variable.
  • Set up your Move command to Move Rectangle 2 to [[This.x]] and [[This.right+20]] after a resize. This will move Rectangle 2 to the required position. ‘This.right’ is the right edge of Rectangle 1. You could also use x (horizonal reference for the top left corner of the widget) or y (vertical reference for the same), or the relative references top, bottom, left and right, which are those edges respectively.

Here’s the example thread that finally helped me understand this and local variables.

#3

Thank you for the information.
Although it did not work for me. I must not have the interactions set correctly.
I will keep working at it.