ngx-virtual-scroller
ngx-virtual-scroller copied to clipboard
rintoj
Support automatic sizing of the virtual-scroller element
First, thanks for this awesome scrolling library. It's still the best out there and provides solutions for almost every scenario. Hopefully this adds another useful solution. We are currently using a forked build with this patch in production.
For consistent positioning and sizing of parent elements, and elements below scroll-container:
This pull request allows the height or width of the virtual-scroller element to be set automatically to (roughly) the exact required pixels to display all items, accounting for wrapping in both horizontal and vertical directions. This does NOT change the number of virtual items that are rendered on screen.
It simply allows the ngx-virtual-scroller to be used in parent containers with fixed elements and sibling elements before and after the virtual scroller in the dom. Without this patch, fixed elements will eventually scroll off the screen as the scroll-container exceeds the height of the virtual scroller element (even when set to 100% height or width.)
This patch also removes the need to manually set height or width of the virtual-scroller element when this setting is enabled for the common case.
I'm sure it is not a perfect solution, but it seems like a decent compromise for those people dealing with situations like this.
CAVEAT: This feature requires the child heights to be of equal size.
NOTE: I disabled this feature by default to maintain backwards compatibility, but I do believe it is reasonable to default this to 'enabled' in reality. I think it is more intuitive than manually setting the height or width of the scroll container, in general, and provides a fairly safe function. It can always be disabled and height/width set manually if users wish to override the default.
@whyboris Do you have thoughts about this pull request? I'd love to hear them. This is currently running in production and working very well on a high-use site.
I'm honored to be a contributor to this repository, but I would want someone like @speige to review and merge.
As far as I can tell by looking at the code it doesn't interfere with anything unless calculateDimensionsAutomatically is set, and if it's set, it will do what you describe 👍
Awesome! Thanks. I was curious as I saw your reaction but wasn't sure what it meant :) Agreed. Would love a review.
I wish I knew. We cloned the repo into our local codebase because it doesn't seem like this library is actively maintained, currently. We're actively looking for other solutions, but so far, this is still the least buggy.
@lincolnthree is your solution currently working correctly ? we have massive problems with it in our messenger: https://mark6-demo.web.app/messenger
you will finde bugs like this: http://prntscr.com/vpz61q You need to scroll up to see it. mostly you will see it on mobile viewport.
@SvenBudak Yes it's working in production, currently for both single-column and multi-column layouts.
I think our problem is the unknown dynamic height of the items. If this is also working. Can you send me please your local version? I would be happy if I can try it in our messenger.
@SvenBudak I'd just clone & checkout the repository from my branch and copy it into your app. That would be the same thing as me sending you the local version.
It solves the exact problem you're having. It's the reason we made the change... so I think it will be worth your time.
Awesome! Where can I find the full file? I am sorry if you linked it already.. I looked already before my first post. But I am a bit confused which one is complete and final.
@SvenBudak This branch: https://github.com/lincolnthree/ngx-virtual-scroller/tree/automatic-element-sizing
@lincolnthree Thank you! I have sent the branch to my colleague. he will try it out.
maybe we should create a fork and actively develop it further? it's a pity, there seem to be a lot of people who are interested in further development.
@speige -- any thoughts on this?
ps - if you were to merge it, do we still need @rintoj to create a new release, or it's something you're able to do as well?
In worst case people can copy the .ts file manually to the project. better then nothing. There is no working alternative currently.
