Ionic-framework: "sticky" in ion-item-divider doesn't work if placed inside VirtualScroll

[gigocabrera]

Ionic version: (check one with "x")
[] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request

Current behavior:

The sticky property in an ion-item-divider doesn't work if it is inside an ion-list with [virtualScroll]. If works fine if it lives inside a plain ion-list component (like in the schedule page in ionic-conference-app)

Expected behavior:

The sticky property in an ion-item-divider should behave the same regardless if it lives inside a plain ion-list or an ion-list with [virtualScroll]

Steps to reproduce:

Take for example the code from the official documentation and add the sticky property to the ion-item-divider as shown below. The divider won't stick in iOS device

<ion-list [virtualScroll]="items" [headerFn]="myHeaderFn">

  <ion-item-divider sticky *virtualHeader="let header">
    Header: {{ header }}
  </ion-item-divider>

  <ion-item *virtualItem="let item">
    Item: {{ item }}
  </ion-item>

</ion-list>

Ionic info:

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.7.0
Xcode version: Not installed

[Fdom92]

Hi, 'sticky' attribute dont work even on ion-list or ion-group. In developer tools appears this:

position: -webkit-sticky;
position: sticky;

but it appear like invalid attributes to position.

so maybe its not only virtual scroll just the class

[gigocabrera]

Hi @Fdom92, the "sticky" directive DOES work fine on ion-list or ion-group on device only. I have a page with the code below that works as expected on iPhone 6 (iOS 10.2)

 <ion-item-group *ngFor="let group of groupedTransactions">
      <ion-item-divider sticky color="light">
        {{ group.label }}
      </ion-item-divider>
      ...
      ...
      ...
</ion-item-group>

but when I use the ion-item-divider inside an ion-list with virtualScroll it stops working.

[Fdom92]

@gigocabrera i just tried what you said and didnt work. This is my ion-group:

  <ion-item-group>
    <ion-item-divider sticky>{{ 'Inventory.divider-one' | translate }}</ion-item-divider>
    <ion-item *ngFor="let f of food">
          <ion-label>{{f.title}}</ion-label>
          <ion-multi-picker item-content [(ngModel)]="f.units" [multiPickerColumns]="simpleColumns">{{f.units}}</ion-multi-picker>
    </ion-item>
  </ion-item-group>

So i think its a problem with sticky directive, i even tried on the mobile.

[gigocabrera]

@Fdom92 have you tried removing the translate pipe from your ion-item-divider? Or try a hardcoded value for testing purposes. That's the only thing I can think of that is different

[RezaRahmati]

Same issue here, I checked it on android device with rc4
<ion-content>
<ion-item-group *ngFor='let groupedContact of myGroupdContactCollection.groupedContacts'>
<ion-item-divider color="light" text-center sticky>{{groupedContact.groupKey}}</ion-item-divider>

[franciscotln]

I'm using crosswalk and I inspected the . It doesn't support the position: sticky css attribute, that's why it works on Chrome but doesn't on device. I think Ionic should have a polyfill for the cases when the browser doesn't support the sticky positioning.

[patricktyndall]

Anybody find a workaround for this?

Have tried several alternative approaches with no luck, including https://github.com/jonaszuberbuehler/ion-affix, putting an ion-item-divider _within_ the VirtualItem ( instead of using VirtualHeader ), and implementing my own sticky header with css.

I've gotten them to work in an ion-list without VirtualScroll. It seems position: sticky just really doesn't like VirtualScroll.

[empresarrollo]

Six months later, I encountered this problem. Has anybody found a solution for this ? It's a shame it couldn't be used with virtualscroll

ionic info:

cli packages: (C:\Users\XXX\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 25.2.5
Node              : v6.9.4
npm               : 3.10.10
OS                : Windows 8.1

Environment Variables:

ANDROID_HOME : C:\Users\XXX\AppData\Local\Android\android-sdk

[daveshirman]

Give up. VirtualScroll is f*cked and not one single Ionic Dev team member
is communicating with the community about fixing it.

The sooner you find an alternative, the less time you'll end up wasting. My
experience.

On 2 Mar 2018 18:04, "empresarrollo" [e-mail] wrote:

Six months later, I encountered this problem. Has anybody found a solution
for this ? It's a shame it couldn't be used with virtualscroll

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/9453#issuecomment-370001668,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ANnlXoHFo9MbxqQk_EQyBMRxG6vAYgTrks5taYmqgaJpZM4LCFkH
.

[ionitron-bot[bot]]

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.