Container ListView scrolling issues

💬 App Building
,
1

  1. My goal:

    • Container ListView should behave normally when scrolling up and down (smooth without any weird behaviors)
    • Container ListView should not jump when scrolling (feels like it jumps a lot from a item-1 to item-2)
    • Container ListView should not get stuck at the bottom when we try to scroll up

  2. Issue:

    • Container ListView: is jumping when scrolling
    • Container ListView: scrolling is not smooth
    • Container ListView: should is getting stuck at the bottom when we try to scroll up after we scroll down, ex: trying to scroll with the mouse wheel and it scrolls up and scrolls back down immediately and to scroll up I have to scroll with wheel may times or scroll forcefully to the top
    • Container ListView: when I try to scroll a bit down it jumps directly to the bottom, or when I select the tab it scrolls down directly to the bottom

  3. Steps I've taken to troubleshoot:

    • just scroll up and down once you have something like below

  4. Additional info: (Cloud or Self-hosted, Screenshots)
    The container listView is inside a tabbed container that is inside a sidebar, and it’s connected to a DB query (ex: getRecords) where I fetch directly from the DB (Postgres), has a pagination component that is connected to another DB query (totalRecords) to display the pagination number and so on…, also it’s limited to how many items to display per each page auto by a value that is being set on Retool DB, the Records tab is auto fetches the records once I select the tab (Records)

    Note: I’ve attached a function that will scrolls to the top auto when I use the navigation component, ListView.scrollToIndex(0, true);

    See video:

    • First behavior when I navigated to the tab it scrolls down and feels like it’s jumping
    • Second behavior when I wanted to scroll to the top it won’t until I kept trying and then it jumps up
    • Third behavior when I wanted scroll to the bottom it jumped directly to the bottom

3

hi @CoderNadir
i have come acrossed your problem.before proposing any kind of solution i would like to know something about your project
how many records are you trying to load at once ?
how much memory is your app consuming?

4

Hi @PrathamParikh
Thank you for trying to help me.

sure here are the answers:

7

Hi @PrathamParikh

No No, when I scroll to the bottom no trigger for fetching more records.
pagination triggered by click not by scroll, so to fetch more records you have to click (< 1 >) next button to load the next 5 records.

Also if I fetch on scroll I wouldn’t use ListView.scrollToIndex() on pagination :grinning_face_with_smiling_eyes:, it’ll be a headache

8

Any help/response from the support?!

9

Ok Thank you for Providing information about initially i thought it was just memory problem or paginnation problem but as i look into Listview.scrollToindex() it might be rerandering issue because it i see in the video that as you go down more records come so it rerender and as rerender it triggers the event of Listview.scrollToindex().so you can try it without Listview.scrollToindex()
to use your slide than maybe slider problem might be fixed.

10

@Vishal1620 even in other listViews where I don’t use ListView.scrollToIndex() and this issue exists.
I vote for a bug.

11

Hi @CoderNadir, I've seen a number of scrolling issues with listviews and I agree it could be a bug, but it's possible it has to do with how pagination is being implemented? I've tried reproing this and haven't seen any issues with scrolling, although it does load in a bit of a clunky fashion.

For my paginated query I have something like this:

select * from example_db
limit 10
offset {{10 * tabbedContainer1.currentViewIndex  }}

and I use that query for each listview in each tab.

There are more performant ways to achieve this UI (basically not using tabbed containers), but again the set up above worked fine for me. If the above method works for you let me know, if it doesn't work or isn't applicable then you can send me your app json and then I'd have something for our engineers to debug and get at the root of your issue!

12

Hi @Mike_M

I am using almost the same structure to paginate, unless I use navigation component with a variable to don’t lose the last browsed page.

but the issue with ListView scrolling I don’t think it’s from the query as it was working super fine, but just recently was bugging and behaving that weird and it’s becoming super annoying and cannot let me work properly.
I have ListView component in other places where I don’t have pagination and it still does those scrolling issues

13

Helloooo!

This is really annoying bug guys! and the client hates it, can I have a reasonable answer?
well I would love to fix it than have an explanation why!

From my side it seems a bug not something wrong with me ListView, cause didn’t change anything on them and they just start behaving that behavior recently!

@Mike_M cc, please have a look on it or redirect me to someone who can fix it!

14

Hi @CoderNadir, I agree this sounds like a bug but we haven't been able to reproduce your specific issue. Could I ask for an app export? That would be the fastest way to get some more engineers to look at it and either debug this or at least have an explanation for you.

You can DM it to me if you don't want to share on the forum.

15

To anyone else that was following this thread, we've narrowed this down to being a bug where nesting a tabbed container in a listview creates the jumping while scrolling issue described above. I made a very simple app that just has a listview with a tabbed container inside, and that reproduced the problem.

I submitted a bug report but in the mean time I recommend using something other than a tabbed container in your listviews, for example I tested out using a segmented control component and that got around the scrolling issue.

2 Likes