How to get x position of horizontal item in repeater

[ondra1]

Hello
I need help At this point I am desperate as I couldn’t find a solution anywhere. I am building a prototype where I have filters in horizontal line done by Repeater where those items are dynamically added and varies in width.

What I need is when I click one of the item I want a dropdown menu to open underneath the clicked item.

The dropdown menu exists outside of the repeater and since Move is not working (repater coordinates are always 0,0) its now roking well.

I tried putting the dropdown inside the repeater but when it opens it moves items to the right since its wider.

Please send help

[bamorris]

So, when I encounter this I either make just one row interactive, or I put it in the repeater and communicate to whomever views it (in an email, or sometimes right in the prototype) that the “pushing” effect will not happen in reality and is just a technical limitation of the demo. But I wanted to try to see if I could figure it out.

You can do it all dynamically, though i think you have to start from an empty repeater (or do some math ahead of time and change the default value of TotalWidthCounter manually).

Demo | dynamic horiz list dropdown.rp (63.2 KB)

Instructions:

1. Basically what you need to do, is add a TotalWidth column in your dynamic repeater that will track the total width all the columns as it grows.

   • add a global variable to track this counter make sure it’s defaulted to 0 to ensure it’s a number
   • when you dynamically a repeater item (See Add button):
     • Set variable value: TotalWidthCounter to [[TotalWidthCounter + {{WidthValue}}]]
     • Add Rows: Set TotalWidth column equal to TotalWidthCounter

2. Then inside your dynamic repeater on the interaction that triggers the dropdown do the following (See Rectangle in Repeater):

   • Set variable value: IndexCache to [[Item.Index]], if you need to modify the dynamic repeater from outside of it such as from the dropdown
   • Move: {{dropdown shape}} to:
     • X: [[Repeater.Left + (Item.TotalWidth - Item.Width)]]
       Repeater is a local variable of type “Widget” that targets the repeater itself
     • Y: [[Repeater.Bottom]]
       Repeater is a local variable of type “Widget” that targets the repeater itself
   • Show the {{dropdown shape}}

3. When the dropdown needs to update the Repeater Data to update an item state (See dropdown repeater item):

   • Edit row data: {{Dynamic Repeater}} set whatever data where [[TargetItem.Index == IndexCache]]
   • Set variable value: IndexCache back to blank (unless you need it for other things)
   • Hide: {{dropdown shape}}

[ondra1]

You are a God and genius!! Thank you so much, you have no idea how much this helped me