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

[Ionic V4.0.0-beta.12] VirtualScroll itemHeight bug #15948

Closed
AIxiuxiu opened this issue Oct 15, 2018 · 5 comments

Comments

5 participants
@AIxiuxiu
Copy link

commented Oct 15, 2018

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/Users/xayq-fanxl/.nvm/versions/node/v8.11.2/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.12
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-webview 2.1.3, (and 17 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/xayq-fanxl/Library/Android/sdk/)
   ios-deploy        : 1.9.2
   ios-sim           : 7.0.0
   NodeJS            : v8.11.2 (/Users/xayq-fanxl/.nvm/versions/node/v8.11.2/bin/node)
   npm               : 6.1.0
   OS                : macOS High Sierra
   Xcode             : Xcode 10.0 Build version 10A255

Describe the Bug
When I use VirtualScroll, it can't render the header using the itemHeight directive.
image

if i delete the itemHeight and then first open the page,it was a blank page and can not render in the most time
image
After scroll the page, it will be rendered what i want
image

while scroll the list,there will always be problems with unrendering or overlapping rendering
image

Related Code

<ion-virtual-scroll #virtualScroll [items]="sortedItems" [headerFn]="myHeaderFn" approxHeaderHeight="30px" approxItemHeight="45px">
    <ion-item-divider *virtualHeader="let header" id="scroll-letter-{{ header }}">
        {{ header }}
    </ion-item-divider>
        <ion-item *virtualItem="let item">
            <ion-label color="dark" >
              <ion-text class="row-title">
                  {{item?.name}}
              </ion-text>
            </ion-label>
          </ion-item>
</ion-virtual-scroll>
myHeaderFn(item, index, items) {
        if (item.isDivider) {
            return item.letter === 'other' ? '#' : item.letter;
        } else {
            return null;
        }
    }

    myItemHeight(item: any, index: number) {
        return 45;
    }

@ionitron-bot ionitron-bot bot added the triage label Oct 15, 2018

@AIxiuxiu AIxiuxiu changed the title [Ionic V4.0.0-beta.13] VirtualScroll itemHeight bug [Ionic V4.0.0-beta.12] VirtualScroll itemHeight bug Oct 15, 2018

@Lx

This comment has been minimized.

Copy link

commented Nov 5, 2018

I'm also experiencing intermittent overlapping of items, especially after navigating backwards:

image of overlapped ion-virtual-scroll items

@Lx

This comment has been minimized.

Copy link

commented Nov 5, 2018

Here's an example showing two separate ion-virtual-scroll containers, where one is simply zero-height despite containing 20 items, and another superimposes all 21 items in the space of one item:

image

DavidWiesner pushed a commit to DavidWiesner/ionic that referenced this issue Feb 1, 2019

DavidWiesner pushed a commit to DavidWiesner/ionic that referenced this issue Feb 3, 2019

DavidWiesner pushed a commit to DavidWiesner/ionic that referenced this issue Feb 4, 2019

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Mar 26, 2019

@brandyscarney brandyscarney moved this from Backlog 🤖 to Done 🎉 in Ionic Core Mar 26, 2019

@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?

@lucianojdg

This comment has been minimized.

Copy link

commented Mar 29, 2019

Here's an example showing two separate ion-virtual-scroll containers, where one is simply zero-height despite containing 20 items, and another superimposes all 21 items in the space of one item:

image

I had the same problem. I can solved by setting "approxItemHeight" property

@ionitron-bot

This comment has been minimized.

Copy link

commented Apr 28, 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 28, 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.