svelte-select icon indicating copy to clipboard operation
svelte-select copied to clipboard

Published 20 hours ago • verified publisher icon rob-balfre

VirtualList unable to accommodate items of different heights.

Open cyaris opened this issue 2 years ago • 6 comments

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.

cyaris avatar Jun 09 '22 21:06 cyaris

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!

rob-balfre avatar Jun 09 '22 23:06 rob-balfre

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 avatar Jun 09 '22 23:06 cyaris

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 avatar Jun 10 '22 16:06 cyaris

@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?

cyaris avatar Jun 10 '22 18:06 cyaris

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

rob-balfre avatar Jun 28 '22 00:06 rob-balfre

@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

cyaris avatar Jun 28 '22 19:06 cyaris