Solid – Virtualizing with a container using max-height doesn't show all items when total height is below max-height
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 7.1k
- Forks
- 466
- Avg merge
- 2d 31m
- Merged PRs (30d)
- 13
Description
Describe the bug
I have a dynamically sized virtual list whose container scroll element has a max-height style. This way, the container should shrink to the full list of items without needing a scrollbar if all of the items can fit below the max-height value.
However, this breaks in Solid. When the total size of the list approaches the max-height or exceeds it, only some of the items are shown.
See this example, where I have 5 items with an initial estimated size of 28px. Then I dynamically update the item size to be 198px. This adds up to a total height of 990px;. In this image, the container has a max-height of 1000px. Despite having enough room to fit everything, only 2 virtual items are returned by the virtualizer:
See reproduction here: https://codesandbox.io/p/devbox/competent-tristan-7467c3
Your minimal, reproducible example
https://codesandbox.io/p/devbox/competent-tristan-7467c3
Steps to reproduce
- go to https://codesandbox.io/p/devbox/competent-tristan-7467c3
- See that not all items are drawn
Expected behavior
If the max-height exceeds the total height needed to show all items, all items should be shown.
How often does this bug happen?
Every time
Screenshots or Videos
Platform
OSX Chrome
tanstack-virtual version
3.10.8
TypeScript version
No response
Additional context
No response
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open the linked CodeSandbox reproduction first and inspect the virtualizer's behavior when five items are resized to 198px inside a container with a 1000px max-height. Trace the Solid integration from that reproduction and verify that all five items are returned and rendered when their total height is below max-height.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100