[SOLVED] Ionic shrinking header - redux

Hi there, I have a somewhat non-trivial header that I am hoping to “shrink” as the user scrolls.
I am aware of ionic’s demo shrinking header but that doesn’t work in my case (when I scroll around, icons get overlaid, show-delete icons get overlaid and all sorts of other things - UI mess)

The reason I say the page is non-trivial is because:
a) It has a regular header
b) It has a search bar that shows up if you tap the search bar
c) The list itself is collection-repeat with infinite scrolling
d) The list has show-delete

My code for the header is here:

Any thoughts on how I can do a shrink effect?

Okay, I’ve made some progress with a modified version of header shrink I found on a forum (lost the link for credit)

This is resulting in a space between the scrolling list and the header

Video here: https://youtu.be/kR9aN3la1wE

Any ideas?

Ah problem solved. Forgot to add

 ion-content {
        top: 0 !important;

(note that the div padding needs to 64px for iOS not 50px)

1 Like