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

Closed
masimplo opened this Issue Jun 13, 2016 · 4 comments

Comments

Projects
None yet
6 participants
@masimplo
Copy link
Contributor

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> -->
  </ion-list>

Which Ionic Version? 1.x or 2.x
Ionic2-beta8

Plunker that shows an example of your issue

http://plnkr.co/edit/ONkXIK0ByvBwWeAfgMcD?p=preview

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

@wli

This comment has been minimized.

Copy link
Contributor

wli commented Jun 14, 2016

I believe this is a dupe/related to #6877

@masimplo

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

@Screeze

This comment has been minimized.

Copy link

Screeze commented Sep 18, 2016

+1
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?

@Screeze

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>
</div>

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