Segment with 100% width on iOS

Ionic Framework Ionic React
1

Hello,

We are using Ionic React 5.0.7.

On iOS, segments don’t have 100% width but a fixed width (in which the actual width depends on the number of segment buttons).

We would like to style a segment with 2 buttons so that it is always displayed as 100% width, with each of the 2 segment buttons using 50% width. We can set the width of the IonSegment to 100%, which causes the segment div to be 100% width instead of a fixed width. If we try to set the width of the 2 segment buttons to 50%, it has no effect. The width is still fixed, and not 100% wide.

Anyone ideas on how to set the width of a segment with 2 segment buttons to 100% on iOS?

Thank you,

Ronald

2

code? because I am not seeing this issue

<IonSegment>
  <IonSegmentButton>
    <IonLabel>ONE</IonLabel>
  </IonSegmentButton>
  <IonSegmentButton>
    <IonLabel>TWO</IonLabel>
  </IonSegmentButton>
</IonSegment>

Screen Shot 2020-08-24 at 12.51.50 PM
Screen Shot 2020-08-24 at 12.51.50 PM906×404 9.28 KB

3

Hi Aaron,

Thanks for the reply.

It turns out that the behavior is caused by wrapping the segment inside an IonToolbar.

I’m displaying the segment as header as shown in the example here: https://github.com/ionic-team/ionic-docs/blob/d636b87e93bb088f7f2e33f0abbc4735ad04a673/src/demos/api/segment/index.html

In that example, the segment is wrapped inside an IonToolbar, which causes the width to be fixed (not 100%). If I remove the IonToolbar and have the segment as the code in your example, it is 100% width.

For now, I think I will skip the IonToolbar.

Kind regards,

Ronald

4

Hi Aaron,

I’ve marked your answer (not having a IonToolbar as parent) as solution. In my case I can wrap the segment as follows:

<IonHeader translucent={true}>
  <IonItem className="ion-no-padding ion-no-margin" id="segment-item">
    <IonSegment onIonChange={(e) => toggleSegment(e.detail!.value!)}>
    ...
    </IonSegment>
  </IonItem>
</IonHeader>

Using the IonItem I can set the appropriate margins and paddings.

Thanks,

Ronald