Space between items in the list is wrong

[dragos-boisteanu]

Hi,

I am using the DynamicScroller for a chat app. When I add new items the space between them is not even close as it should be.

After I destroy and re-creeate the component(page refresh or v-if) it looks well:

Something similar happens when I add items at the top.

I am using Vue 2 and vue-virtual-scroller version 1.0.10

Any solution for this problem ?
Thank you

[nicholascloud]

I am having this same issue with the RecycleScroller.

Vue3 + [email protected].

The issue seems intermittent. Sometimes pages render correctly, other times a "space" appears between pages. The space is not actually an empty item, but the result of how item positions are calculated.

[ihapitw]

Same problem

[ghimisradu]

We're having the same problem when the items in the scroller are expandable items(like a tree). Expanding let's say first item and scrolling to the bottom and expanding the last item will result in an empty space where the first item it's expanded.
It seems that the scroll it's not recalculating the sizes correctly (DynamicScroller)

[mattia-palmieri]

Same problem with vue-virtual-scroller 1.0.10 and DynamicScroller

[bleto]

Version: 1.0.10

Hi, I have that same problem in DynamicScroller component.
There are empty spaces in the list, reserved for the missing element, but the data is not in the component.

Code usage:

            <DynamicScroller
                :items="expandedItems"
                :key-field="optionKey"
                :prerender="prerender"
                :min-item-size="estimatedHeight">
                <template #default="{ item, index, active }">
                    <DynamicScrollerItem
                        :item="item"
                        :active="active"
                        :index="index">
                        <slot
                            name="item"
                            :index="index"
                            :item="item"
                            :on-expand="onExpandItem" />
                    </DynamicScrollerItem>
                </template>
            </DynamicScroller>

I noticed that the problem occurs with duplicate values, because in my case the invisible element is already displayed in the list (element "ccc").
An array of values is passed to display, but fewer elements are returned in the default scoped slot.

[mmouterde]

Same issue here.
Thanks to @bleto, I fix it removing unexpected duplicate values.

[dragos-boisteanu]

In my app I don't have duplicates. But the items have 2 keys, 1 is an id that is set when the item is added to the list, after the message is sent to the server the server response with a key called seq that I set for the message. The :key-field is set to seq.
Could this be the problem because I don't have a seq when the item is first added to the list ?

EDIT: this wasn't the problem, the items still have that wrong space between them

[Akryum]

Could you update vue-virtual-scroller and see if the problem still occurs? A lot of bug fixes shipped

[dragos-boisteanu]

I updated it and now it works. Thank you a lot. This is the best virtual scroller I found.

Now, there is still a problem. My objects from the list are like this:

const obj = {
  id: null, 
  seq: 123,
  ...otherFields
}

If I set the keyField prop to 'seq' it will say that the 'seq' is an undefined field in the item object. The item object has the id field that has the same value as the seq field from my object and another field item that is my object, but no seq(the keyField) field. You can see more details in the images bellow.

I found a way to make it work by doing obj.id = obj.seq before obj is added to the list of items. It works, but it doesn't feel right.

[Akryum]

@dragos-boisteanu Could you open a new issue with a runnable reproduction so I can look at your problem? Thanks! 🙏

[dragos-boisteanu]

@dragos-boisteanu Could you open a new issue with a runnable reproduction so I can look at your problem? Thanks! 🙏

You can find it here: #758

[Akryum]

Please open a new issue if you still see wrong item sizes with the latest releases