# Implementing Auto Scroll for Flex Repeater

**URL:** <https://forum.inductiveautomation.com/t/implementing-auto-scroll-for-flex-repeater/73572>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [May 11, 2023, 2:29am UTC](https://forum.inductiveautomation.com/t/implementing-auto-scroll-for-flex-repeater/73572 "2023-05-11T02:29:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdia](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdia/32/87599_2.png) [@mdia](https://forum.inductiveautomation.com/u/mdia)\
**Post date:** [May 11, 2023, 2:29am UTC](https://forum.inductiveautomation.com/t/implementing-auto-scroll-for-flex-repeater/73572/1 "2023-05-11T02:29:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 11, 2023, 2:51am UTC](https://forum.inductiveautomation.com/t/implementing-auto-scroll-for-flex-repeater/73572/2 "2023-05-11T02:51:16Z")

</div>

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

> [@\[Feature-789\] Perspective component extensibility](https://forum.inductiveautomation.com/t/feature-789-perspective-component-extensibility/29459/6):
>
> We would probably have to expose an internal like https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView via a scripting method - first on components directly, then for something like the table it would have to have an ability to pass a specific row ID or something similar. That’s a decent feature request, though - I’ll file an internal ticket slight_smile

> [@Move scroll bar in perspective table to the location of selected row](https://forum.inductiveautomation.com/t/move-scroll-bar-in-perspective-table-to-the-location-of-selected-row/51452):
>
> Hello everyone, When I change the “SelectedRow” in the perspective table component, the scroll bar does not move to the selected row location. Below is the video. Any idea how this can be fixed? Thank you!

> [@Perspective is there a way to manipulate the scroll bar position?](https://forum.inductiveautomation.com/t/perspective-is-there-a-way-to-manipulate-the-scroll-bar-position/47145):
>
> I have a table component that I would like to have navigate to a certain vertical position when it is populated by a script. How could I go about setting this?

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [May 11, 2023, 1:17pm UTC](https://forum.inductiveautomation.com/t/implementing-auto-scroll-for-flex-repeater/73572/3 "2023-05-11T13:17:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [May 12, 2023, 12:20pm UTC](https://forum.inductiveautomation.com/t/implementing-auto-scroll-for-flex-repeater/73572/4 "2023-05-12T12:20:50Z")

</div>

Sounds like you are describing a carousel of some sort.

---

<div class="post-metadata">

**Author:** ![Ibrahim\_Shawkey](https://avatars.discourse-cdn.com/v4/letter/i/54ee81/32.png) [@Ibrahim\_Shawkey](https://forum.inductiveautomation.com/u/Ibrahim_Shawkey)\
**Post date:** [May 25, 2024, 10:09am UTC](https://forum.inductiveautomation.com/t/implementing-auto-scroll-for-flex-repeater/73572/5 "2024-05-25T10:09:24Z")

</div>

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:

- One need to reorder the items or use an inner wrapper
- I.a. Firefox and Edge doesn't show the scroll (possible bug)  
[link to stack overflow auto scroll](https://stackoverflow.com/questions/47372148/overflow-auto-not-working-with-justify-content-flex-end/47377177#47377177)

here is a screenshot of my flex-repeater props:  
 ![Screenshot 2024-05-25 at 12.09.06](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/0/20d032281e1db8d37ac869f1e52647b4980faa61.png)
