DynamicScroller add vertical margin between items

[georges49]

I want to add a margin top of .25rem and a margin bottom of .25rem.

Before implementing vue-virtual-scroller, I was using my-1 (bootstrap 4). After implementing the library, I added the my-1 class to DynamicScrollerItem but it isn't working (it's working on the first item to be correct).

I noticed that the margin value has to increment for each item to make it work (ex: first item 10px, second item 20px, third item 30px etc...).

I tried to change the transform: translateY value as well but every time a change occur it would reset to the original values.

I am using :min-item-height="51", I tried to increase it to 59 (4px top, 4px bottom) but it did not work. but if I use :item-height="59" it would work.

But I want to use the DynamicScroller because I am using my list component in multiple views and sometimes in the same list I have items with different heights.

[georges49]

After digging a little deeper, if in vue-virtual-scroller.esm.js -> computed -> heights -> for loop

Replace accumulator += current; with accumulator += current + 8;

I get exactly the style I want.

How can I implement this in my component however?

[solojuve1897]

I also have problems with getting a margin between two items in DynamicScroller. Styling should be much more flexible than it is at the moment.

[Akryum]

Why not adding padding in the items themselves?

[alexsasharegan]

I have a similar case where the dynamic items are cards on a different colored background. Adding padding to the item does not put margin between items with the background color. Is there a way to do this?

[Akryum]

Put the background color on an inner div.

Le sam. 4 mai 2019 à 04:53, Alex Regan [email protected] a écrit :

I have a similar case where the items are cards on a different colored background. Adding padding to the item does not put margin between items with the background color. Is there a way to do this?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Akryum/vue-virtual-scroller/issues/123#issuecomment-489287841, or mute the thread https://github.com/notifications/unsubscribe-auth/AAVLE7BIKCQMH4L2URCNZI3PTT3CZANCNFSM4GTHWUDA .

[fgilio]

For my very specific use case I'd have been easier to have the margin in the DynamicScrollerItem. That way I can more easily reuse the components that I put inside, which need to position and size inner stuff depending on it's size.

[nathanparker]

Add a wrapper div to the card and add Bootstrap's padding class pb-3 (or add padding-bottom: via CSS).

<DynamicScrollerItem
  :item="item"
  :active="active"
  :data-index="index"
>
  <div class="wrapper pb-5">
    <divclass="card">
      ...
    </div>
  </div>
</DynamicScrollerItem>

[zelucena]

Add a wrapper div to the card and add Bootstrap's padding class pb-3 (or add padding-bottom: via CSS).

<DynamicScrollerItem :item="item" :active="active" :data-index="index"

...

It works like a charm. I had tried using margin but it won't work though. I am pretty fine with this solution but it should be disclosed on docs IMO.