Open georges49 opened 5 years ago
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?
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.
Why not adding padding in the items themselves?
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?
Put the background color on an inner div.
Le sam. 4 mai 2019 à 04:53, Alex Regan notifications@github.com 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 .
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.
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>
Add a wrapper div to the card and add Bootstrap's padding class
pb-3
(or addpadding-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.
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.