Having a SELECT Input in the ion-nav-bar

1

Hello I’ trying to have this same behavior :

I’m trying to implement this in the ion-nav-bar but unfortunately I’m stuck.

<ion-nav-bar align-title="right" class="bar-stable">
       <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"></ion-nav-back-button>

    <i class="button-icon icon ion-android-contacts"></i>
    <select>
      <option>Blue</option>
      <option selected>Green</option>
      <option>Red</option>
    </select>

</ion-nav-bar>

If anyone would help, it will be very much appreciated :smile:

Ron

2

What exactly are You stuck on? Does Your select show up in Your DOM but is not visible in the front? Or not even in the DOM?

3

Hello Psyche,

the select shows up in the DOM and is visible but is unusable…

4

Than maybe there’s a problem with CSS properties? Maybe Your select is covered by another div. Please set up a jsFiddle or try playing around in the dev tools :wink:

5

I just implemented that :

<ion-nav-bar align-title="right" class="bar-stable">
   <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"></ion-nav-back-button>

<select>
  <i class="button-icon icon ion-android-contacts"></i>
  <option>Blue</option>
  <option selected>Green</option>
  <option>Red</option>
</select>

But the select is not working…

6

By “not working” you mean what?

  1. You don’t see it at all?
  2. You see it but can’t click it?
  3. You see it, you click it, you can’t click options?

Also in order to debug try to go to the simplest possible code and work Your way upwards. In Your case start by removing the entire i element. If the select works then, than put the i Back but without the classes. then add classes one by one.

Hope that helps!

7

Did you find any solution to do this? I’m trying to do the same. The select works but I can’t see the icon.

8

I’ve found the solution. I’m using ionic popover instead of button + select. This link http://codepen.io/ionic/pen/GpCst really helped me.

<ion-nav-bar class="bar-balanced">
  <ion-nav-back-button>
  </ion-nav-back-button>
  <ion-nav-buttons  side="right">
      <div ng-controller="popoverCtrl" class="buttons">
          <button class="button button-icon ion-more" ng-click="popover.show($event)">
          </button>
      </div>
  </ion-nav-buttons>
</ion-nav-bar>