Search on ionNavBar. New component contribution to ionic

ionic-v1
1

Hi,
I just created a component/directive for ionic that put a search bar inside of ion-nav-bar, overhiding the title, like whatsapp/viber has on android. How can I contribute it to ionic?

There is an example on CodePen: http://codepen.io/bgrossi/pen/JtvsL.

It uses a ion-nav-button on right side and presumes 1 icon on left and 0 or 1 icons on right side.
Icon is adaptable to android and ios…

There are some improvements needed but it’s working well…
Some needed improvements:

  • Show/Hide title method on $ionicNavBarDelegate to not use setTitle().
  • Better handle to known how many icons has on nav bar.

Cheers,
Bruno Grossi

2 Likes
2

Bruno,

Wow. That looks really good. You did a great job with it.

To contribute it to Ionic, you could put together a formal pull request. However, you could also just open an Issue and let the core devs see it. They might like it enough to take it from there.

What app are you making? The screenshot above is pretty interesting.

Justin

3

Hi @Calendee, I will create the formal pull request… Thanks.

Our app is called Pertoo (“perto” is “near” in portuguese), a parent/school communication app. Our first version was made in xcode/objective-c, and now we’re releasing this new multi-platform version thanks to you guys from Ionic Framework and Cordova/Phonegap…
Our site (in portuguese) is [http://pertoo.com][1].

Bruno
[1]: http://pertoo.com

4

This is awesome! Thanks for contributing, Bruno. I did notice that the search bar does not appear in Safari/iOS after clicking/tapping the search icon…seems to be an issue with the position:fixed css. Does this work for you guys on iOS/Safari?

5

Hi, @ahuwaa , I fixed this here. I will prepare a new codepen soon…

6

Much appreciated! Looking forward to see the fix @brunogrossi

7

hi @brunogrossi any updates on the new codepen? Thanks!

8

@brunogrossi did you manage to fix the issues?

9

Hi, I removed this component from my app for now. Some other important issues should be fixed before it.

But the main problem with this solution is the use o css calc operator, only supported by ios8 and Android 4.4!
Sorry.