iOS Mail App-like search box in list


#1

Hello,

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)?

Best,
Daniel


#2

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


#3

@max: Thanks a lot! Looks pretty good :smile:

Only some minor issue on IOS7:

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.

Best,
Daniel


#4

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]

1: http:// [2]: https://github.com/driftyco/ionic/issues/408


#5

Release of 0.9.20 fixes this issue.


#6

hi… are you sure that this “start-y” property is still working?


#7

@krur : You are right - it seems to have died. I setup a new demo at http://codepen.io/calendee/pen/BpADr

It doesn’t do the start-y. I’ll open an issue.

Uh oh. GitHub is down. I’ll try to remember to do this later.

UPDATE : Issue 743 opened. https://github.com/driftyco/ionic/issues/743


#8

@krur : Actually, this does work still. http://codepen.io/ionic/pen/sDdpG

Unfortunately, it only works when there is enough content to scroll. See the discussion here :

Let us know if you have any input on it.