<ion-item-divider sticky> is not working

Ionic Framework ionic-v3
1

I saw the conference app use this code: to make divider sticky like ion-sticky. But it does not work on my app. How to use it?

2

This doesn’t work in chrome, but you can test it in another browser.
But it doesn’t work on phone too (including for the ionic conference app).

3

Does not seem to be working on Safari either… Is there any solution for Ionic 2 to have ion-sticky feature?

4

Hello,
did you finally manage to achieve using ion-sticky feature ?

5

No… I am hoping the core team will jump in here. But no luck :frowning:

6

Hi, I am testing it on android device with rc4 still not working

7

I have it working in safari browser. Maybe make sure you are actually nesting it within an ion-list > ion-item-group > ion-item-divider

8

the problem seems to be that in the main.css we have
ion-item-divider[sticky]{
position: -webkit-sticky;
position: sticky;
}
which seems to be not supported!

any alternatives to change ion-item-divider[sticky] ?

9

OMFG! The Android System Webview update addressed the header sticky issue on Android! Download the latest version if it.

1 Like
10

Awesome !! Thanks for the update !

11

Hi, I updated the latest version of webview and still is not working I’m using the conference app, any ideas?

12

If you are using chrome -> update it, android -> update the webview and iOS should work.
Did you change anything in the conference app ?

13

I deployed the app into my android device and the sticky headers are working, is working in the browser also, but for some reason is not working in the emulator.

Emulator:
Android version is 6.0
WebView Version is 57.0.2987.108

Device
Android Version 6.0.1
WebView Version is 56.0.2924.87

14

Same problem for me.

I am happy enough having it working on the physical device so no big deal for me :slight_smile: