Implementing Auto Scroll for Flex Repeater

I'm working on a project where I have a view with a flex repeater that could potentially create up to 20 instances or maybe more. All these instances won't fit on a single screen due to space constraints, which leads to an overflow. This wouldn't typically be an issue as users can manually scroll to view all instances.

However, in this particular case, the view will be displayed on a large screen TV, and users won't be interacting with it directly. Therefore, I'm looking for a way to add an auto scroll feature to the flex repeater so that it automatically scrolls through all instances without any user interaction.

I've been searching for a solution but so far have been unable to find one. Is there a way to set the flex repeater in Ignition to auto scroll? I am also open to other potential solutions.

2 Likes

No can do at the moment. This is a perfect example of why we need this functionality introduced.

Could you bind the repeater's instances prop to a script that loads the instances just a few at a time, based on the value of some timer prop?

It wouldn't be as pretty as auto scroll of course.

Sounds like you are describing a carousel of some sort.

1 Like

I have faced the same problem while building a chatting app. Here is how I fixed it:
-for my flex-repeater that shows the messages based on their timestamps, I used a column flex repeater with direction prop set to "column-reverse" and justify: "flex-start". Then I queried my chat messages using "ORDER BY timestamp desc" and that always automatically scrolled to the latest message between the users. I found that answer on stackoverflow:

When an overflow occur to the left (or top), a scroll doesn't get rendered, and the reason is that a HTML document's normal flow is left-to-right (top-to-bottom).

Flexbox has a row-reverse direction, which will solve that, thought 2 things comes with that:

here is a screenshot of my flex-repeater props:
Screenshot 2024-05-25 at 12.09.06

1 Like