Search code examples
ionic-frameworkionic3html-selectpopover

Ionic 3 popover on select, how to use of check icon instead of circle?

I tried to put it like this, like on the example

  <ion-col col-md-6>
    <ion-list>
      <ion-item>
        <ion-label floating>Type</ion-label>
        <ion-select interface="popover" [(ngModel)]="userType">
          <ion-option value="1">Type 1</ion-option>
          <ion-option value="2">Type 2</ion-option>
        </ion-select>
      </ion-item>
    </ion-list>
  </ion-col>

but the output is not similar on the example on the ionic documentation. here is the output enter image description here

I want something like this

enter image description here

Solution

  • What you are seeing is actually a platform issue: Ionic styles elements according to the platform you are running on. See the docs on this here.

    You can also easily reproduce your issue viewing the ion-select docs and changing between iOS and Android.

    iOS output:

    iOS ion-select

    Android output:

    Android ion-select

    So assuming your developing for the iOS platform you don't have to change anything in your app to get the look you want. Once you deploy your app on an iOS device everything will look as you expect.

    While testing your app in browser (I'm assuming Chrome, other browser might have the same feature) you might want to use the dev tools (F12) and toggle the device mode. There you can choose to see the viewport of a iPhone or iPad and after refreshing the page (F5) you should see the correct controls.