Wp mode and ion-segment

From the doc, the ion-segment shows a difference between the selected choice and the other ones


Why mine does not show the same thing?


You should post code samples with question like these. No one can debug very well from a screenshot…

ion-segment applies the class segment-activated to the active link. This class turns up the opacity to 1 causing it to have the darker color. If your active link has the segment-activated class, you have some sort of css/environment issue. If your active link does not have the segmented-activated class you may have an error in your code.

There’s really no way to know from sreenshots, especially considering Ionic 2 is still in beta, it could even be a bug in Ionic.

Hi @rlouie,

Here is the html

  <ion-segment [(ngModel)]="_language" (change)="languageChange()">
    <ion-segment-button value="en">English</ion-segment-button>
    <ion-segment-button value="fr">Français</ion-segment-button>

With your explanation, it would mean that the ios and android versions won’t work too, correct? It is not my case right now, so this is why I don’t understand. Maybe you will find my mistake? (I hope!)


So, remember when I said:

If you watch when you click on each one you will see that it is in fact being applied. However, in the css you’ll see that no css rules exist in app.wp.css. This looks to me like an issue with Ionic. Since it works in the ionic docs I’m guessing it’s a version issue.

But, since it’s just a css issue, you can fix this for now very easily by just putting

.segment-activated {
  opacity: 1;

in your css.

Yep, working like expected! Big thanks

By the way, where can I see the full css for each platform?

I saw some in node_modules/ionic-angular/themes, but not sure it is the full css.

And, in the same time, do you know how to select the dark theme?

should be in www/build/css

As an update to my original answer, the problem was with the way the classes were nested in the wp.scss file for ion-segment. On windows phone the styles will only work when the ion-segment is used inside a toolbar. I actually opened an issue and submitted a pull request for this:

ok, this is what I saw too, but I am not an expert of css.

thanks again!