I’ve been playing around with Ionic for a few days now and what I’ve accomplished with it so far is quite amazing.
I started off with a list view, then added tabs, modals, then the refresher to the list and now I thought a search box on top of the list would be great.
So I looked around for a good UX example and, of course, found the search box in iOS’s Mail App. The key point is, that the search box is not “in your way”. When you go to your inbox, it is not initially visible. You have, like with the refresher, scroll up to unveil it. I bet everybody has seen this before.
So I’ve tinkered a a bit through the Ionic code to see how the refresher has been implemented. By the looks of it (and my limited knowledge of Angular) this might not just be something I could easily extend because it is implemented in Ionic’s content directive which seems to be quite a driving core part.
So, question is: Is there a way to implement this, or is this maybe on the roadmap (and in the near future)?
Hey @daniel! I had been meaning to do this, so I went ahead and added it. Support for this is in master as of 1 minute ago.
Basically, it works like this:
<content start-y="55"></content> which will start the scrolling 55 pixels “down” so that scroll box is hidden. I played with it and it feels just like the iOS Mail app does.
Does that work for you? You can see an example of it in the repo in the content.html example in js/ext/angular/test/content.html
In your example, you use bar bar-header item-input-inset for the search box and button. Because of the css .platform-ios7 .bar-header > * the button is pushed down by 20px and looks a little off as well the start-y.
Maybe I missed the css when merging or maybe you weren’t aware of it.
I had the same issue with the 20px margin on iOS7. For now, the only way around it is to override the style and remove the padding. The discussion is #478 and there is a github issue [here][2]
