ion-select does not display correctly

Question

I'm trying to implement select options provided by ionic framework as mentioned here http://ionicframework.com/docs/v2/api/components/select/Select/

<ion-item>
  <ion-label>Toppings</ion-label>
  <ion-select multiple="true"  okText="Okay" cancelText="Dismiss">
    <ion-option ng-selected="selected">Bacon</ion-option>
    <ion-option>Black Olives</ion-option>
    <ion-option>Extra Cheese</ion-option>
    <ion-option>Mushrooms</ion-option>
    <ion-option>Pepperoni</ion-option>
    <ion-option>Sausage</ion-option>
  </ion-select>
</ion-item>

On rendering the page, the select options they don't show up correctly and appears like a single list item. I looked for examples everywhere but most of them uses the standard html select tag instead of ion-select. Is this because ion-select requires additional css or do I need add some more code to make it work ? I'm really not sure what am I missing here.

Answer 1

If you make app in Ionic 1 then you need to use Ionic 1 documentation.

Try something like this.

<div class="list">
  <label class="item item-input item-select">
    <div class="input-label">
      Toppings
    </div>
    <select>
      <option>Black Olives</option>
      <option selected>Bacon</option>
      <option>Extra Cheese</option>
      <option>Mushrooms</option>
      <option>Pepperoni</option>
      <option>Sausage</option>
    </select>
  </label>
</div>

Additionally:

• Ionic Directive to Select multiple options (CodePen)
• Cool Select with ionic (CodePen)