[4.0.0-beta.17] ion-segment-button edges out when button number > 4

[jing-zhou]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

ion-segment-buttons edges out on both side of tool bar when you have more than 4 ion-segment-buttons. this dose not happen on 4.0.0-beta15
Expected behavior:

all the ion-segment-buttons should be displayed in the toolbar
Steps to reproduce:

initiate an Ionic project with the starter

ionic start myApp tabs --type=angular

copy paste the following code snippts under ion-header sector of the home page
Related code:

<ion-toolbar>
    <ion-segment [(ngModel)]="order" color="light">
      <ion-segment-button value="receive" >
        <ion-label>Receive</ion-label>
      </ion-segment-button>
      <ion-segment-button value="publish" >
        <ion-label>Publish</ion-label>
      </ion-segment-button>
      <ion-segment-button value="topic" >
        <ion-label>Topic</ion-label>
      </ion-segment-button>
      <ion-segment-button value="query" >
        <ion-label>Query</ion-label>
      </ion-segment-button>
      <ion-segment-button value="read" >
        <ion-label>Read</ion-label>
      </ion-segment-button>
      <ion-segment-button value="trash" >
        <ion-label>Trash</ion-label>
      </ion-segment-button>
    </ion-segment>
</ion-toolbar>

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (/home/wjz/.nvm/versions/node/v10.7.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-webview 2.0.2, (and 13 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/wjz/Android/Sdk)
   NodeJS            : v10.7.0 (/home/wjz/.nvm/versions/node/v10.7.0/bin/node)
   npm               : 6.2.0
   OS                : Linux 4.15

Environment:

   HTTP_PROXY  : http://127.0.0.1:37245/
   http_proxy  : http://127.0.0.1:37245/
   HTTPS_PROXY : http://127.0.0.1:37245/
   https_proxy : http://127.0.0.1:37245/

[manucorporat]

would you mind sharing a screenshot?

[jing-zhou]

this is a chrome screen shot while using 'Ionic DevApp'. you can see that the last 'ion-segment-button' (TRASH) had actually been selected, yet it could not been displayed properly

[jing-zhou]

this is the screen shot of the same page from v4.0.0-beta15.

[brandyscarney]

Segment has been updated to match the Material Design spec. If you have so many buttons that it overflows, we recommend using the scrollable property on ion-segment. You can also customize your segment to use smaller width buttons and less padding, but I don't think it is possible for us to fix this in Ionic for your specific use case. Here's some more information on the Material Design Tabs, which our segment is designed to match: https://material.io/design/components/tabs.html#spec

And here is a codepen where I am editing the segment using CSS to make it fit more and achieve your specific use case: https://codepen.io/brandyscarney/pen/pqyPJB?editors=1100

[jing-zhou]

Thanks, the CSS works fine for me

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.