Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to make ion-segment look the same on both iOS and Android?

After setting the mode of ion-segment, they still look different after rendering them in ionic lab.

I have tried setting the mode of ion-segment and ion-toolbar to "md" but they still look different.

https://ibb.co/HV75Ly2 Here is an image of what they look like after setting the mode.

<ion-toolbar mode="md">
    <ion-segment scrollable mode="md">
      <ion-segment-button value="top" checked>
        TOP
      </ion-segment-button>
      <ion-segment-button value="nfl">
        NFL
      </ion-segment-button>
      <ion-segment-button value="nba">
        NBA
      </ion-segment-button>
      <ion-segment-button value="mlb">
        MLB
      </ion-segment-button>
      <ion-segment-button value="nhl">
        NHL
      </ion-segment-button>
      <ion-segment-button value="ncaaf">
        NCAAF
      </ion-segment-button>
      <ion-segment-button value="ncaab">
        NCAAB
      </ion-segment-button>
    </ion-segment>
</ion-toolbar>

I would like the ion-segment to look like the android version on both platforms but currently, they still look different.

like image 240
Harinder Gakhal Avatar asked Oct 18 '25 06:10

Harinder Gakhal


1 Answers

Since one of the Ionic 4 beta's you also have to set mode on every component.

This means the ion-segment-button components as well, like:

<ion-toolbar mode="md">
    <ion-segment scrollable mode="md">
      <ion-segment-button mode="md" value="top" checked>
        TOP
      </ion-segment-button>
      <ion-segment-button mode="md" value="nfl">
        NFL
      </ion-segment-button>
      <ion-segment-button mode="md" value="nba">
        NBA
      </ion-segment-button>
      <ion-segment-button mode="md" value="mlb">
        MLB
      </ion-segment-button>
      <ion-segment-button mode="md" value="nhl">
        NHL
      </ion-segment-button>
      <ion-segment-button mode="md" value="ncaaf">
        NCAAF
      </ion-segment-button>
      <ion-segment-button mode="md" value="ncaab">
        NCAAB
      </ion-segment-button>
    </ion-segment>
</ion-toolbar>
like image 147
rtpHarry Avatar answered Oct 22 '25 14:10

rtpHarry