Select options do not appear in item-select in ion-nav-buttons


#1

The following code does not display any selected options. Any tips on styling to get the selected options to appear?

  <ion-nav-buttons side="primary" >
      <label class="item item-input item-select">
        <div class="input-label" style="height: 30px; width: 200px">
        </div>
        <select  ng-change="showSelectValue(mySelect)" ng-model="mySelect">
          <option>shoes</option>
          <option>household</option>
          <option>office supplies</option>
        </select>
      </label>
  </ion-nav-buttons>

#2

Your HTML is a bit strange to me

Where is your form tag?
Also your tag label should not include the select.
And you should have a "for"attribute on your label for accessibility.


#3

Thanks.

The code is a straight lift from the example at ionicframework.com/docs/components/#select.

The difference is that I wish to adapt it for use in ion-nav-buttons, using it as a category filter for a list.

Any proposed alternative appreciated.


#4

Sorry, I learn everyday.

You could try to simplify the markup, here you have many elements with CSS classes that could interfere in particular item as you’re not in a list, I would start simply with the select and then try to add things if this first step works :

<ion-nav-buttons side="primary" >
        <select  ng-change="showSelectValue(mySelect)" ng-model="mySelect">
          <option>shoes</option>
          <option>household</option>
          <option>office supplies</option>
        </select>
  </ion-nav-buttons>

#5

Solution was to change the div.input-label in my original post such that

  1. the element was styled with a positive z-index
  2. it contained {{ currentCategorySelected }}

Thanks for the help!