Virtual list with dynamic elements

I am wondering what would be the best way to create a virtual list with dynamic elements of which I don’t know what their height will be until I put them in the DOM. I know that I can set a function to calculate the height of an element, but what would be an efficient way to do that?


The best way of course is height function where you need to return element height. But if you don’t know it then it is a bit tricky. Then I suggest logic should be the following: after VL elements inserted you get the DOM element height and save it in some cache object/array, and trigger VL to rerender list, and inside of its height function you return that value from cache

This seems to work for the initial items, but as soon as I append more items, the list starts to jump and skips elements. Is this a bug or is the virtual list behaving differently when appending items?

Edit: Seems like its not a problem of the append function, but of long lists. Somewhere around the 15th element the list starts skipping elements, even if I put 20 items in the list at init time.

I am facing same problem. But how to trigger vl to rerender list? Will that cause double refresh?

Hello, in my case, I have a variable item-text element that may occupy up to 3 lines when rendering. I do not know how to calculate its height, and I don’t like double rendering approach.

The height is, still, must be specified. You can just assume that your item-text will have 2 or 3 lines and fix its height. There is no other solution here, height needs to be specified, this is the core idea of VL

Thanks Vladimir, I’ll use the height with 1 line in item-text, and apply a style to the item-text element to show just 1 line of text