Using Push/Pull instead of fixed coordinates in this prototype?

For the life of me I can’t seem to get push/pull working in this prototype (this is incomplete and has other bugs but this is the primary issue I’m trying to solve). I’m attempting to “show” a resized element and push something below and it just won’t go.

If I use absolute position I can get this to work but that’s not really going to be scalable. Any suggestions appreciated!

Page 1 in this is the absolute position; Page 2 is my push/pull attempt…
Repeater-Edit-2.rp (97.7 KB)

Tried a second example where I’m not using a dynamic panel just to see if I could get this working - I just don’t think even after years I really understand how push/pull works…
forum2.rp (49.0 KB)

Long story short, I recommend a different approach of using a Resized event on the top dynamic panel (DP) that moves the lower dropdown. If you eventually have more widgets to move below that, you can include them all in another “container” dynamic panel.

Long story long…

This seems to be your relevant interaction code:

First of all, when you change the size of “ChipField-Input-Deanna” it triggers its parent DP, “Chip-Dynamic Panel”, to also change size (because this DP’s STYLE includes “Fit to Content”, which is good.) When this happens, your dropdown DP, “Dropdown-Dynamic Panel” is no longer technically below “Chip-Dynamic Panel”; rather they overlap, so it does not get pushed. In order for widgets “below” to get pushed/pulled, they must be fully below (sucks, and trips up a lot of folks, but that’s just the way it is.)

Secondly, and more of a problem, it turns out that “Chip-Dynamic Panel” has already changed size prior to your Set Size action, due to “Chip Repeater” growing when the fourth row is added. So this already negates your attempt to push “Chip-Dynamic Panel”.

Thirdly, the widget you are “showing”–“Chip-Dynamic Panel”–never gets hidden, so the action of
Show Chip-Dynamic Panel push widgets below
would have no effect.

In this updated version of your .rp file,
Repeater-Edit-2.rp (189.1 KB)

I duplicated your Page 2 to Page 3…

  • I tried to hide “Chip-Dynamic Panel” as the first action in Deanna-Variable:Case 2. This resulted in “Dropdown-Dynamic Panel” getting pushed, but unfortunately with a gap. It took a while to figure out why, but it is due to “Chip-Dynamic Panel” already changing size from the repeater growth.
    • I also added a “SHOW/HIDE” button just to ensure the push/pull widgets could actually work.
    • I also added some keyboard “shortcut” actions (in the Page Key Down event) so that pressing the down-arrow key fires the Deanna-Variable:Case 2 and pressing the up-arrow key fires Case 1. The result is the push/pull widgets works correctly. (This is what led me to finally realize the only difference between this shortcut and selecting all 4 items in the dropdown is the “Chip Repeater” growing in height, thus changing the height of “Chip-Dynamic Panel”.)

In Page 4 I removed the Show/Hide actions in your “Deanna-Variable” widget–abandoning the whole push/pull widget approach–and instead added a Resized event to “Chip-Dynamic Panel” with this action: Move Dropdown-Dynamic Panel to ( , [[This.bottom]])

  • This ensures that whenever the DP changes size your dropdown is immediately below it.
  • (Note this uses a trick of specifying a blank x-dimension value. Essentially, it means, “move the target by no pixels horizontally” --thus only vertically. Furthermore, the expression [[This.bottom]] is a handy way to easily refer the pixel location of the bottom edge of “This (same) widget”.)

In Page 5 I show a further simplification that removes the need for your “Deanna-Variable” widget (although I realize you may have other plans for this; but if you created this only to get the dropdown to move correctly, it is not needed.)

  • I removed the “ChipField-Input-Deanna” widget and “replaced” it by styling “Chip-Dynamic Panel” in the same way (pro tip: use the Format Painter (Ctrl-M) to copy & paste widget styles.)
    • To keep this DP the same size as it was, I kept your hotspot widget, but but sent it to back. I also moved its Click or Tap event directly to the “Chip-Dynamic Panel” widget. In this way, it won’t block the interactions for the chips (in the repeater) but will fire when any other part of the DP is clicked. Now, clicking on the “close_background” widget in a chip will remove that row and unselect the corresponding row in the dropdown.
    • Now, whenever “Chip Repeater” changes height by adding/removing rows the “Chip-Dynamic Panel” height changes accordingly, triggering its Resized event, which moves “Dropdown-Dynamic Panel” accordingly.
1 Like

This is amazing - thanks so much!