-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
Ionic v4: Virtual Scroll does not work inside of an ion-tab #14591
Comments
It is not the only problem with the virtual list. There is a conceptional bug. The html scroll has an empty space up, if you scroll fast on some heavy element, and stops too frequently when you scroll down. Yes you can load more element into the list, but you can really save big amount of load in the long run. The main problem is, that you shouldn't use the div as a virtual list, the scrolling speed should be managed by touch / mouse etc. I just realized it very lately, when i made my own virtual list, which has got far better feature set. (you cannot scroll up infinitely, like in the case of google calendar, if you don't do it. You don't know what is the top element, and there are other stuff also i have to say) I realized a bug in the android recycle list view, and the facebook itself also. I didn't have high hopes on v4, so i have detached my project in november last year from ionic. |
Temporary solution I'm using is adding an
|
@manucorporat @mlynch @adamdbradley Please consider virtual-scroll + infinite scroll bugs seriously as they basic necessary feature required for the maximum data-driven Apps. Ionic 2 and 3 implementations did not justify the needs, as a result, many devs moved to native frameworks after waiting for a long time. As a community, we tried to solve this problem but with less expertise, it was hard to achieve. It will be great if V4 does not appoint and Ionic would consider VS + infinite scroll seriously and high prioritize them. This request is not just from me but from 25 other fellow devs who love Ionic and love to use Ionic for every idea/business/implementation. Last but not least Thanks for providing Ionic which is the best gift web community has received so far. Thanks |
@manucorporat has made a lot of virtual scroll improvements for v4. This has been a priority for us and we hope you find it resolves a number of these issues |
Hi ! I cannot reproduce your example, and stripping my hair with virtualscroll and ionic 4. Would you be so kind to share your example code in order to make it working according to your comment ? |
@gydammin are you using v4 with virtual scroll? We would LOVE your feedback. Please don't struggle in the dark here. What problems are you having? |
hi there! So far what I did:
export class CategoriesService { content() : Observable<Category[]> {
|
@gydammin Note that virtual scroll was not setup correctly in alpha-6, meaning you could have some issues there. Try alpha-7, which should contain the right proxies needed. For examples, we have our test case app in the Angular directory. This should have right right markup |
@mlynch @mhartington noticed the same issue as @sbannigan, but his workaround *ngIf is working.
|
same here! |
+1 |
same issue here |
same issue here +2 |
fixes ionic-team#16725 fixes ionic-team#16432 fixes ionic-team#16023 fixes ionic-team#14591 fixes ionic-team#16050 fixes ionic-team#15587
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Bug Report
Ionic Info
Run
ionic info
from a terminal/cmd prompt and paste the output below.Describe the Bug
ion-virtual-scroll
does not load any elements when used inside anion-tab
.Steps to Reproduce
Steps to reproduce the behavior:
tabs
template.ion-virtual-scroll
element following the Ionic 4 example inside one of the tab page components. See that this virtual scroll doesn't load any children and throws no errors.ion-tab
that wraps theion-router-outlet
Related Code
This doesn't work:
This does:
Expected Behavior
ion-virtual-scroll
should work inside of aion-tab
Additional Context
After poking around in https://github.com/ionic-team/ionic/blob/51c2aa69a29dec1f2bb76c1b7387716b7872fd4b/core/src/components/virtual-scroll/virtual-scroll.tsx#L366.
this.scrollEl.offsetHeight
logs out at0
when wrapped in theion-tab
, but returns the correct height when not. For some reason even though theion-scroll
element exists, it has 0 height when inside theion-tab
. Wrapping theonResize()
method and thescrollEl.componentOnReady()
callback in asetTimeout(() => {})
fixes the issue, but seems like a hacky solution.The text was updated successfully, but these errors were encountered: