How do i create a ionic select box?

Question

Am working on a ionic project and wanted to create an ionic select box which is as shown in this documentation page

Here is the codepen link, where i have put sample of the example am working on.

<ion-view view-title="Home">
      <ion-content class="padding">
        <ion-list>
          <ion-item>
            <ion-label>Toppings</ion-label>
            <ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
              <ion-option value="bacon" checked="true">Bacon</ion-option>
              <ion-option value="olives">Black Olives</ion-option>
              <ion-option value="xcheese" checked="true">Extra Cheese</ion-option>
              <ion-option value="peppers">Green Peppers</ion-option>
            </ion-select>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-view>

Select box doesn't show-up instead all values of <ion-option> are appearing in same row.

How do i make sure it appears same as shown in documentation example ?

Answer 1

The template you pasted and the documentation page you are pointing to is for Ionic2/Angular2 but you are using Ionic 1.3.1.

You can find the documentation for the select in Ionic 1.3 here