Issue with Auto Height in New ListView Component Not Expanding Fully

Hello Retool Community,

I'm currently facing an issue with the new ListView component in Retool, specifically related to the auto height feature. I've been transitioning from the legacy ListView to the new component, and I've encountered a problem where the ListView doesn't fully expand to accommodate all the dynamically added elements.

Description of the Issue:

The issue arises when I use the auto height setting for the ListView. As I dynamically add more elements to the list (using a button), the ListView expands only up to a certain point. Beyond this point, instead of further expanding, it starts to incorporate a scrollbar. This behavior is limiting, as I need the ListView to grow and display all elements without the need for scrolling, which was the behavior observed in the legacy ListView component.

Steps to Reproduce:

  1. Set up a ListView with the auto height option enabled.
  2. Dynamically add elements to the ListView using a button.
  3. Observe that after adding a certain number of elements, the ListView stops expanding and introduces a scrollbar.

Expected Behavior:

I expect the ListView to continually expand in height as new elements are added, without any limitation, thus showing all elements at once without a scrollbar.

Actual Behavior:

The ListView expands only to a certain extent and then resorts to a scrollbar for additional elements, not showing all elements at once.

Request for Assistance:

  • Has anyone else experienced this issue with the new ListView component?
  • Are there any known workarounds to make the ListView expand beyond the limited size, as it did in the legacy version?
  • Could this be a bug in the new ListView component?

I would greatly appreciate any insights, suggestions, or solutions regarding this matter. The legacy ListView worked seamlessly for my needs, and I'm keen on achieving the same functionality with the new component.

Thank you in advance for your time and assistance!

1 Like

Hi, the ListView behaves the same way for me. That's not really nice.
Unfortunately, I don't have a solution yet, so I'm pushing this post with my answer.

Hi @Soheil.M,

Sorry to hear that you have also found this limitation in the new listview component.

Like you, I expected that "auto" should mean fully auto with the listview extending indefinitely on screen (I guess with the programmer being responsible for doing pagination or SQL LIMIT).

The current semi auto is very annoying as it narrows the workspace with the scrollbar and breaks the idea of a webpage extending to infinity.

I suspect that it is a change they have made as part of their attempt to optimise performance of the component. There seem to be a lot of odd design decisions with components that I imagine come from limitations of the underlying Retool platform.

If the Retool team pick up on this and change it, or if you find a workaround, please let me know.

+1 for this. It's really frustrating to suddenly get double scroll bars from a) the main page and b) the list/grid view contained within.

I also see similar issues with tables set to auto. Initially they load fine, but if you have pagination enabled, and move to a page with fewer results, the table size reduces (as expected). However... when you then go back to the first pages I now have a reduced size table with the scroll bar displaying. It's really frustrating. My only workaround thus far is to keep setting fixed heights that can then leave you with a lot of space before you see your footer/pagination.

Hopefully get a fix for these things soon...

I filed a ticket for this unwanted scrollbar behavior and we'll keep this thread updated with any news. Thank you all for sharing repro steps, context and pain points—please feel free to continue adding to this thread!

4 Likes

Thanks Victoria. +1 on hoping for a fix.

1 Like

Hello, I am also running into this problem. Just wanted to check if there's been any development here. Thanks!

I too am having this issue and its causing a bit of a headache for a list view heavy app of ours. Keen for this to be fixed as a matter of urgency

I have managed to fix this issue by loading into my accounts global pre loaded CSS the following: ._luK0B._cN86F { max-height: none !important; overflow: hidden !important; }

This worked great for me as a workaround, thanks!

2 Likes

Worked for me, too! thanks!

Edit: Seems to work reliably only on Firefox, Chrome seems to cut off parts.

2 Likes

Interesting, all browsers seems to be looking all good for me with that little bit of CSS...

You are a lifesaver, thank you!

1 Like