Landscape footer segments don't fill width of screen

Ionic Framework ionic-v3
1

My footer doesn’t fill the width of the screen in landscape mode (see attached image). How can I make it so that each button will take up one third of the screen width?

image
Screen Shot 2560-04-04 at 1.52.06 PM.png1186×264 20.9 KB

My code:

 <ion-footer >
 <ion-toolbar color="b2">
<ion-segment [(ngModel)]="icons" color= "b02">

  <ion-segment-button clear icon-left (click)="gotopreviouspage()">
  <ion-icon  name="arrow-back"></ion-icon>
  </ion-segment-button>

  <ion-segment-button clear icon-only class="menu-button" (click)="gototable()">
    <ion-icon name="menu"></ion-icon>
  </ion-segment-button>

 <ion-segment-button clear icon-right (click)="gotonextpage()">
  <ion-icon name="arrow-forward"></ion-icon>
  </ion-segment-button>

</ion-segment>
2

Problem is on iOS only?

Have a look at $segment-button-ios-toolbar-button-max-width at https://ionicframework.com/docs/api/components/segment/SegmentButton/ and or https://ionicframework.com/docs/api/components/segment/Segment/

1 Like
3

Yes it was an ios only issue. Thank you for the link to the correct solution in the docs! I missed that when I was looking for a solution yesterday.

Thanks!

1 Like