search

clauderic / react-tiny-virtual-list

A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!
https://clauderic.github.io/react-tiny-virtual-list/
MIT License
2.46k stars 166 forks source link

Height 100% #70

Closed ErikBooij closed 5 years ago

ErikBooij commented 5 years ago

Hi! I'm not a 100% sure if this is an actual issue, or if I'm just using it wrong, but I have a variable-height container in which I render a VirtualList with its height set to "100%". This renders only the first item plus the overscanCount.

Here's an example of what I'm seeing, I've changed two things after forking your example, I've set the height of #root to 500px and I've set the height of VirtualList to 100%: https://codesandbox.io/s/nr91pm8mx0

Could you advise me if this is actually a bug, or if I'm doing something stupid?

clauderic commented 5 years ago

Unfortunately you cannot use height: 100% with react-tiny-virtual-list if the scroll direction is vertical.

See this note in the readme:

  • Width may only be a string when scrollDirection is 'vertical'. Similarly, Height may only be a string if scrollDirection is 'horizontal'

The reason being react-tiny-virtual-list uses the computed height value to determine how many items need to be rendered within the visible bounds of the container. You'll have to dynamically measure the container before rendering the VirtualList

nous- commented 5 years ago

Dynamically measuring the container? https://github.com/bvaughn/react-virtualized-auto-sizer https://github.com/bvaughn/react-window#can-a-list-or-a-grid-fill-100-the-width-or-height-of-a-page

lyqeyes commented 5 years ago

Unfortunately you cannot use height: 100% with react-tiny-virtual-list if the scroll direction is vertical.

See this note in the readme:

  • Width may only be a string when scrollDirection is 'vertical'. Similarly, Height may only be a string if scrollDirection is 'horizontal'

The reason being react-tiny-virtual-list uses the computed height value to determine how many items need to be rendered within the visible bounds of the container. You'll have to dynamically measure the container before rendering the VirtualList

I understand what you mean, but I'm confused about what you said in the readme:

Width may only be a string when scrollDirection is 'vertical'.

I think it should be "Height may only be a Number when scrollDirection is 'vertical'.", isn't it?