I stumbled onto the Ionic shrinking header codepen . It is awesome thank you for this. I wondered why it didn’t function like Instagram’s shrinking header does and decided to see if I could make it function similar. Instagram’s shrinking header will begin displaying the header again before scrolli…

@Ross I’m also interested in rdtran’s question, I have tabs in my app, and it appears that when switching tabs, the shrinking effet disappears. What should I do?

@WidawskiJ Are you applying the header-shrink attribute to the ion-content within the other tabs? If you are using any of the latest Ionic nightly builds the reason it is not working is because the other tabs are still in the DOM because of the view caching. To get around this you will need to be …

Hey @Ross , thank you for taking the time to write such a detailed answer! I’ve tried your workaround but it unfortunately didn’t work. I’m currently working with ionic 1.0.0-beta.13 lanthanum-leopard, so not nightly (which just caused me too much trouble and forced me to rollback). Because I don’…

@WidawskiJ Hmmm I’m not sure what the issue may be. I created a codepen for you that works using Ionic beta.13, tabs, and the shrinking header directive - http://codepen.io/rossmartin/pen/KwwdyL I hope it helps!

@rdtran I created a codepen that has a shrinking header and tabs similar to Facebook. I think this is what you are after - http://codepen.io/rossmartin/pen/pvjRaO This is all it took - // line 150 in codepen var tabs = $document[0].body.querySelector('div.tabs'); // line 166 in codepen tabs.st…

Thank you for taking the time to do this. Don’t forget to add bottom to 0: .scroll-content{ top: 0 ; bottom: 0; }

@Ross you’re the best, and I think I love you. Cheers and thanks again for taking the time to do this!

@WidawskiJ Hey you’re welcome the credit goes to @max and Ionic. I’m hacking up a new demo for chats/messaging, I’ll be posting a new thread soon. It has a directive for elastic textareas in footer inputs that grow with the amount of text inputted :smiley:

Oh great! I’m looking forward to that, please ping me when it’s up! (also, if you’ve succeded in implementing a seach-bar that replace the title in a ion-nav-bar, you’ll be my hero :smile: )

@Ross @WidawskiJ - have either of you had any success implementing this with the tabs being defaulted on top (Android), and not scrolling the tabs completely away but anchoring them at the top of the view. I was able to scroll the header correctly by using: tabs.style[ionic.CSS.TRANSFORM] = …

Instagram Style Shrinking Header

demo

yasirpanjsheri February 27, 2017, 4:44am 23

hi , i have found kind of a solution…but it still has a problem if someone can help, thanx

Topic		Replies	Views
Ionic Shrinking Header tutorials	7	3915	July 28, 2015
Shrinking Header with platform specific Tabs in Ionic beta 14 ionic-v1	0	566	February 25, 2015
headerShrink with tabs issue ionic-v1	1	369	April 22, 2014
Restrict shrinking header to work only for one tab ionic-v1	1	415	September 18, 2014
Shrinkable header ionic-v3	7	5302	January 3, 2018

Instagram Style Shrinking Header

Related topics