Boundaries on chips scroll

Hi there!

I am wondering how to handle scroll boundaries on scrolling chips.
I mean, I have an outer panel and an internal panel. The one on the inside should contain as many chips as the user adds and then should scroll to show the ones being masked by the outer panel.
If I need to see the third chip, for example, I need all the chips before to scroll beyond left visible margin limit.
Is there any way to do this or are there any limitations due to the width of the viewport?

I’ve had a look at the documentation concerning slider and scroll but could not come to any satisfying result!

Thanks for your attention!

filtri_per_forum.rp (603.6 KB)

I’m not entirely sure what the behaviour here should be. What do you mean by a “chip” here? How do I add one using the prototype?

Hi JonB!
It is supposed to get populated by doing what follows:

  1. clicking on the filter icon on the right
  2. opening the first collapsible called ‘colore’
    3 choosing colours by clicking and checking the checkboxes
    Many thanks!

Hi reinaudo.e,

Hmm, it looks like the file that you attached may be different than the one described in your last post. From looking at the file that you uploaded, it looks like right-clicking the “Outer chips in Scroll” panel and choosing “Scrollbars > Show horisontal as needed” does the trick, if you adjust the “Chips” widget to fit initially within the viewable area of the parent panel. This shows a scrollbar, but allows you to move the content horizontally within the parent panel as you add more content.

Hopefully that helps!

Sorry for the delay. I’ve had some issues.
I attach you a new file.
Please have a look at the filters scroll on the top part.
When you select many items, the filter space gets populated but if you try to drag them (to see them), you’re not able to. There has to be an error I can’t find. There’s also another problem. If you try to clear almost all applied filters and leave just one, you see the filter slide on left. Can’t understand why.

filtri_per_test_question.rp (11.8 MB)

Hi reinaudo.e,

It looks like the “move” boundaries on your “outer_chip_dt” dynamic panel are reversed and instead setting their boundaries outside of the drag area, which will restrict the dragging interaction of the “tagsOuterPanel”. In this case, changing it so that the left boundary is instead “greater than or equal to -222” and the right boundary is “less than or equal to 222” should allow the panel to be dragged as expected. I’ve edited your file to reflect this quick change (also note that I also removed the “linear” drag animation to improve the interaction’s smoothness):

filtri_per_test_question_edited.rp (11.8 MB)

As for your second issue, could you describe what you mean when you say the filter slides left in a little more detail? I’m not sure if I’m seeing the same behavior on my end after making the above change, but please do let me know if you still need help with this part!

Hi Simon!

Thank you so much!
The issue I had is any longer visible!
You’ve fixed everything at once!


1 Like