search

rob-balfre / svelte-select

Svelte Select. A select component for Svelte
https://svelte-select-examples.vercel.app
Other
1.26k stars 175 forks source link

VirtualList unable to accommodate items of different heights. #423

Open cyaris opened 2 years ago

cyaris commented 2 years ago

See the repl: https://svelte.dev/repl/30b19d1cd95c4f10a771a91f2de6e322?version=3.48.0

Without the {VirtualList} prop, the items are formatted as expected. With the {VirtualList} prop, the first item overlaps with the other items.

rob-balfre commented 2 years ago

Not got too much experience with svelte-tiny-virtual-list but I don't think you can have items of different heights unless you pass in the item height of each item. If you figure out a way let me know!

cyaris commented 2 years ago

I got it working passing through an itemHeight for each, but then it breaks when new items are passed through. So, only worked onMount. Will keep playing around with it though. Thanks!

cyaris commented 2 years ago

Hey @rob-balfre , do you know how the itemCount prop is being set for svelte-tiny-virtual-list? If itemCount is the total number of items to be rendered at any particular time. Not the total number of items. Thanks!

cyaris commented 2 years ago

@rob-balfre can ignore question asked above. I think I have a solution for this. should I make a pull request or send a REPL?

rob-balfre commented 2 years ago

@cyaris depends if it requires internal changes to svelte-select or not

cyaris commented 2 years ago

@rob-balfre here's a REPL. No internal changes to svelte-select are required. Enabling group headers for VirtualList would be extremely helpful though.

The process is just to calculate the height of each item and pass those through as a prop.

https://svelte.dev/repl/05fa2975a39944e387170a5b67f88ae6?version=3.48.0