Moving widgets to the left in multi-select

#1

Hi all, I’m trying to create a multi-select dropdown, using a series of “badges” to display each selection. These are displayed next to each other horizontally. Each one has a delete icon and the behaviour I’m trying to achieve is that when any one is deleted, all the others move left into the space that’s been vacated. For example, if there are 6 badges and badge 2 is deleted, then badges 3, 4, 5, and 6 move left into that space.

I’ve attached my multi-select project to show what I’ve done so far.

Any help would be much appreciated.

Multi-select.rp (73.1 KB)

#2

While hide, check pull widgets and select from right as an option and you are done!
You will need to do a minor work around with space management for pixel perfect shift, but you will get there :slight_smile:

#3

Thank, that works. However, I have an arrow icon on the right to indicate the expand/collapse states and I don’t want this to “pull” right. Is there a way to fix its position? Also, how can I tackle the pixel-perfect shift?

#4

Hi!

If you want to restrict push/pull to only a let of widgets, place those widgets inside of a dynamic panel. This will limit push-pull to only the contents of this panel.

#5

Thanks!

Do you know how I can get each badge to pull right so that the spacing is maintained between each one? This is my project at the moment:

Multi-select.rp (79.1 KB)

#6

Hi!

Yes. Build the padding into the tag widgets themselves: add a clear rectangle the width of the desired space to the right side of each group, and then jam the tags right up next to each other with no space in between. Be careful not to overlap them.

#7

That’s great, thanks!

closed #8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.