Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix(template): using tombstoneSize for non-cached items with 0 height #1858

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

FelixMuehling
Copy link
Contributor

Fixes #1812

I have looked into the issue I had with ionic components, where the height of the virtual scroll container was wrong. (#1812)

Ionic's ion-item component, which I used in my example, is having an height of 0px initially, which leads to _virtualItems being an array of size: 0 and cached: true items (set in the renderingStart$ observable).

Shortly after the initialization, the resize observer emits the actual height of the ionic item, and will add the difference in height to the contentSize (line 861). That will happen for each ionic item in my view.
But before the second item difference will be calculated, the positionByResizeObserver$ observable in positionElements() will call updateElementSize() for any further item. The updateElementSize() function will then take the cached size by calling getItemSize(), which will replace the size of 0 with the tombstoneSize and update _virtualItems(). After that, any further calculated differences will be wrong.

Ive added a simple || this.tombstoneSize to in the size ternary in updateElementSize to fix this. This could have also be added in the getElementSize function, but I thought it may be unexpected if that function wouldn't return the actual element size.

I hope I didn't miss anything here, the autosize strategy code is actually quite complex.

This fixes an issue where the contentSize of of the autosize virtual scroll strategy is being calculated wrong after the resize observer emitted its first event.
@github-actions github-actions bot added </> Template @rx-angular/template related 🔬 Experimental Experimental: Feature, docs, demos labels Feb 10, 2025
@hoebbelsB hoebbelsB merged commit c73ab28 into rx-angular:main Apr 27, 2025
1 check passed
@FelixMuehling
Copy link
Contributor Author

Thanks for merging @hoebbelsB

Is there a chance we could get a release anytime soon? We would really like to resolve this issue in our projects 😄

@hoebbelsB
Copy link
Member

@FelixMuehling done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔬 Experimental Experimental: Feature, docs, demos </> Template @rx-angular/template related
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Autosize virtual scroll viewport height being wrong when working with Ionic components
2 participants