Issue with Auto Height in New ListView Component Not Expanding Fully

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

Unfortunately, I couldn't get this to work for me. I don't see any effect, at least in Chrome. Could you please provide a more detailed example of this?

Do you have any updates, @victoria ?

:thinking: I'm guessing the css class names have changed. This guide shows how to find the class name to use: How to use Custom CSS in Retool Apps

Hi Tess,
could you clarify please to what identifier the previous identifier "._luK0B._cN86F" changed to?

We all just added this line of css to settings but actually don't know the item it was applied to.

Thanks!

Hmm I don't think we keep a record. Can you send me an app export? I can test it on a past version of Retool and try to find out

+1
"Auto" should be, well... Auto! And it shouldn't mess with performance at all.

@Tess Has there been an updated on this issue? What is the best workaround that people recommend without having to put in some customer css that might break in the future? For now i have had to create fixed size but i would rather it expand based on the content. Does anyone know if you can resize it dynamically based on the content? Thanks!

1 Like

I'm still waiting for a scalable long-term solution. In the meantime, this custom CSS fragment seems to have fixed the issue for me:

.ZCwQCf._8Q5HYA { max-height: none !important; overflow: hidden !important; }

@Tess can we expect a definite solution anytime soon?

I had been using ._luK0B._cN86F { max-height: none; } as a solution but suddenly, this week, there is a max height again apparently, and worse of all, there is no scroll showing, so the app has become useless for my team. We are returning to excel. I will try this other CSS and see if it works. @Tess , please help us with a solution.

This seems to be the issue for me:

For some reason, adding ._container_s27cc_1 { max-height: none !important; overflow: hidden !important; } is not working for me. It is not even showing in the styles when I inspect the app. Can someone please help? This makes my whole app useless.

This is an issue for us to and is causing a double scrollbar which is really bad UX

Our users are reporting a broken scroll in ListView components as of this morning.

I had the component set to auto-height with a 30vh max-height. I decided to try deleting that, and as a result saw a 100vh placeholder text meant to convey a default, so in my head I figured there was no max-height set.

But then when I leave that edit view and come back to it, 100vh is filled in like it was an intentionally set value i.e. not just a grayed-out placeholder example value. And the scroll is still unavailable.

after deleting my 30vh value:
Screenshot 2024-09-03 at 11.09.58 AM

with tooltip about the value:
Screenshot 2024-09-03 at 11.10.11 AM

For now I've set a fixed height on that container and the scroll works just fine. But obviously this is not ideal because when there are fewer list items, the height can be needlessly tall.

@dguzzo Does it work if you set the max height in the UI to something like 999vh ?