Ionic-framework: bug: scrollable ion-segment doesn't expand ion-buttons when needed

[adeblas]

Bug Report

Ionic version:
Ionic 5.0.1
Current behavior:

When you use a ion-segment with many ion-segment-buttons and set it as scrollable="true", all the buttons' width is 90px, even if the inner content doesn't fit.

Expected behavior:
The ion-segment-buttons should expand to fit the label content.

Steps to reproduce:
Create an ion-segment with 20-30 ion-segment buttons including large words

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.1
   @angular-devkit/build-angular : 0.900.3
   @angular-devkit/schematics    : 9.0.3
   @angular/cli                  : 9.0.3
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI   : 1.2.1
   @capacitor/core : 1.5.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (4 plugins total)

Utility:

   cordova-res                          : not installed
   native-run (update available: 0.3.0) : 0.2.8

System:

   Android SDK Tools : 26.1.1 (/Users/xxx/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.0
   NodeJS            : v12.15.0 (/usr/local/bin/node)
   npm               : 6.13.7
   OS                : macOS Mojave
   Xcode             : Xcode 11.3.1 Build version 11C504

[adeblas]

If you add min-width: auto; to the inside ion-segment-buttons it works like in Ionic 4

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/[email protected]

[lapid3]

@liamdebeasi Mine is still the same

[liamdebeasi]

@lapid3 Can you provide a repo with the code required to reproduce the issue?

[simonhaenisch]

@liamdebeasi I don't think this is just related to @ionic/angular. We have the same issue in a Stencil + Ionic (5) app and when I add ion-segment-button { min-width: auto; } (as mentioned above), the issue is gone.

Codepen: https://codepen.io/simonhaenisch/pen/xxGjvPb?editors=1000

[liamdebeasi]

@simonhaenisch The changes I made were made to Ionic Core, I just happened to post the Angular dev build version since that was what OP was using.

I used the dev build on your CodePen and it looks like the issue is fixed: https://codepen.io/liamdebeasi/pen/jOPKOvL?editors=1100

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20763 and will be available in an upcoming release of Ionic Framework.

[ionitron-bot[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.