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

VirtualItem does not seem to work with custom components #6881

masimplo opened this Issue Jun 13, 2016 · 4 comments


None yet
6 participants
Copy link

masimplo commented Jun 13, 2016

Short description of the problem:

I am trying to use VirtualScroll but instead of directly using ion-item as the virtual item, I am using a custom component that encapsulates ion-item.

What behavior are you expecting?

Render the component normally as when using ngFor.

Steps to reproduce:

  1. Create a custom component that its' template has a complete ion-item
  2. Use that component inside a virtualScroll
  <ion-list [virtualScroll]="items">
  <list-item *virtualItem="let item" [item]="item"></list-item>
  <!-- <ion-item *virtualItem="let item" item="item">{{item}}</ion-item> -->

Which Ionic Version? 1.x or 2.x

Plunker that shows an example of your issue

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.8
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.3.1
Xcode version: Xcode 7.3.1 Build version 7D1014


This comment has been minimized.

Copy link

wli commented Jun 14, 2016

I believe this is a dupe/related to #6877


This comment has been minimized.

Copy link
Contributor Author

masimplo commented Jun 15, 2016

I think it is the opposite of #6877 I am using a custom component inside VirtualScroll, not VirtualScroll inside a custom component


This comment has been minimized.

Copy link

Screeze commented Sep 18, 2016

Same issue here, my custom list items all get assigned:
transform: translate3d(375px, 0px, 0px);
although the items itself have some height set.
Is there any workaround?


This comment has been minimized.

Copy link

Screeze commented Sep 18, 2016

Seems like I'm able to use this as workaround (wrapping custom item in div):

<div *virtualItem="let item">
    <my-list-item [modeldata]="item"></my-list-item>

@adamdbradley adamdbradley added this to the 2.0.0-rc.4 milestone Nov 20, 2016

@adamdbradley adamdbradley self-assigned this Nov 20, 2016

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 9, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.