Sticky List headers

coen_warmer · January 28, 2014, 10:12am

I was wondering if there is something like this possible under Angular / Ionic: https://github.com/emilsjolander/StickyListHeaders

Maybe the framework could support this out of the box?

max · January 28, 2014, 4:55pm

Hey @coen_warmer, this is definitely on the list of things we sill support out of the box. Stay tuned!

Ben · January 28, 2014, 10:20pm

@coen_warmer I’m pushing for this too. We are excited about adding it soon!

coen_warmer · January 29, 2014, 1:28am

@max @Ben That would be amazing! Coupled with a little easier support for list headers / dividers this would be a killer feature.

Thanks for the awesome work guys!

coen_warmer · January 30, 2014, 12:48am

Referenced at: https://github.com/driftyco/ionic/issues/390

coen_warmer · March 30, 2014, 4:04pm

@Ben Any progress on this front?

crapthings · April 1, 2014, 5:59am

i just want to post this, yeah killer feature.

Ben · April 1, 2014, 5:22pm

@coen_warmer We’re working on it. I’ve played with an internal demo that works pretty good, but not quite ready for prime time. Thanks for the reminder about this though, I’ll bring it up with @max this afternoon.

mhartington · April 1, 2014, 6:29pm

@Ben I have this thrown together (just css) but I had to tweak the ion-content and ion-scroll.

coen_warmer · April 2, 2014, 7:59am

@mhartington Thanks for sharing.

Is this supposed to work from the codepen? Because I’m not seeing the dividers being sticky in desktop Chrome at least…

mhartington · April 2, 2014, 12:30pm

I just tested it in chrome and in safari and it works. Although I do have the experimental web features flag turned on.

coen_warmer · April 2, 2014, 1:27pm

@mhartington Ah, that must be it then.

coen_warmer · April 2, 2014, 1:30pm

Yup, that was indeed it. Looks great.

But I’m guessing this won’t work on iOS and Android browsers at this moment right?

mhartington · April 2, 2014, 1:55pm

Unfortunately,

http://caniuse.com/css-sticky

But as far as being performant goes, Its a lot better than having to do it through javascript.

coen_warmer · April 2, 2014, 2:37pm

So basically this works out of the box on iOS6 and 7, but not on Android…
That actually might be good enough in some cases.

But ion-list is currently being reworked to something that will support sticky list headers on all platforms.

mhartington · April 2, 2014, 2:43pm

@coen_warmer I agree, its not really a design paradigm I’ve ever seen in Android.

Calendee · April 3, 2014, 12:35pm

Some discussion of adding it here: https://github.com/driftyco/ionic/pull/1024

Not sure when it might happen though.

gastonbesada · April 20, 2014, 6:08am

Hi, I found jq implementation here: http://brianhadaway.github.io/iOSList

I don’t know if this can be refactor in angular.

kamleshkoringa · June 25, 2014, 12:27pm

Hi,
Anyone found work around to fix position of list header content in scroll view. Please let me know we need it urgently.
Is this future already supported in ION?
If not by When can be available?

salvador · June 25, 2014, 7:33pm

I’ve been trying to adapt a few solutions for this (iOSList mainly), but with no success. Has anyone been able to adapt this?