Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 (cordova-lib@9.0.1)
   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

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:8 (5 by maintainers)

Top GitHub Comments

2reactions

liamdebeasicommented, Mar 17, 2020

@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

1reaction

liamdebeasicommented, Mar 18, 2020

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.