Skip to content
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

Virtual scroll not completing with custom components #17298

Closed
Ross-Rawlins opened this issue Jan 29, 2019 · 4 comments

Comments

2 participants
@Ross-Rawlins
Copy link

commented Jan 29, 2019

Bug Report

Ionic version:
[x] 4.x

Current behavior:
When implementing virtual scroll with any content in the containing tag the page renders on start up. As soon as the only thing inside the container is the custom component it stays on the init process, the elements are given the correct positions but the class virtual loading is still appended to the element. This only gets removed when I scroll on the page and then the content shows.

Expected behavior:
The class virtual-loading show should be removed

Steps to reproduce:
Implement virtual scroll with a custom component inside of it.

Related code:
This renders

 <ion-virtual-scroll #virtualScroll [items]="eventsList"   approxItemHeight="400px">
        <div *virtualItem="let item" class="event-item">
1
            <app-events-list-item [event]="item" ></app-events-list-item>
        </div>
    </ion-virtual-scroll>

This does not

 <ion-virtual-scroll #virtualScroll [items]="eventsList"   approxItemHeight="400px">
        <div *virtualItem="let item" class="event-item">
            <app-events-list-item [event]="item" ></app-events-list-item>
        </div>
    </ion-virtual-scroll>

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (/Users/rossrawlins/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

System:

   NodeJS : v8.9.4 (/usr/local/bin/node)
   npm    : 6.6.0
   OS     : macOS Mojave

@ionitron-bot ionitron-bot bot added the triage label Jan 29, 2019

@Ross-Rawlins

This comment has been minimized.

Copy link
Author

commented Jan 29, 2019

After further investigation to seems to only happen when I am setting the height of the custom component.

@Ross-Rawlins

This comment has been minimized.

Copy link
Author

commented Jan 29, 2019

This issue with the class seems to also happen when you change the list.

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Mar 26, 2019

Thanks for the issue! This should be fixed in the ionic 4.2.0-dev.201903262032.a8a48a4 dev release. Could you please try this and let us know if it isn't fixed?

@ionitron-bot

This comment has been minimized.

Copy link

commented Apr 25, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Apr 25, 2019

Kiku-git added a commit to Kiku-git/ionic that referenced this issue May 16, 2019

fix(virtual-scroll): use correct item top calculation with header or …
…footer function (ionic-team#15948) (ionic-team#17345)

- use the right index in updateVDom to update the top transition ()
- extend unit test to verify the top is also calculated right with a given headerFn and footerFn
- update the visibility of the node also if a given approxHeaderHeight/approxFooterHeight matches the calculated height

fixes ionic-team#15948 fixes ionic-team#17298
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.