Ion-segment style broken

Ionic Framework
1

Hi there,
I defined these simple segment buttons:

  <ion-segment value="present" (ionChange)="segmentChanged($event)" class="ion-margin-top">
    <ion-segment-button value="present" [layout]="'icon-hide'">
      <ion-label>present</ion-label>
    </ion-segment-button>
    <ion-segment-button value="absent" [layout]="'icon-hide'">
      <ion-label>absent</ion-label>
    </ion-segment-button>
  </ion-segment>

But the rendering is totally broken, see the attached gif.
I did not define any custom styling so I don’t understand where the issue comes from.
I use Ionic v6.0.8.
Thanks for your help.
style broken

3

This is your issue. You added this class to the segment. you need to remove this.

1 Like
4

Thanks but even without the class="ion-margin-top" the issue is still there :frowning_face:

5

I think the issue is global and all the style of my application is broken, I have to refresh the application multiple times to have the real style applied. I absolutely don’t know what is going wrong. I will open an issue on StackOverflow hopping someone else will help!

6

Please create a reproduciable codepen :blush: