ionic-framework: ion-select with long text options doesn't render properly on ios and md

Bug Report

Ionic version: 4.0.0

Current behavior: Long ion-select-option won’t be displayed properly in the pop-up compared to ionic 3

Expected behavior: Long ion-select-option should properly size the item and allow the user to see all the text

Steps to reproduce:

Create ionic 4 project
Add <ion-select> with 2 options: 1 with very long text and 1 with short text
Open the ion select. The first element should display only 30-40 characters and hyphens

ios example

md example

if you do the same with an ionic 3 project, this should show properly both of the lines:

ios example

md example

Other information:

Setting white-space: normal; on the alert-radio-label does help a bit to show longer text but still it is maximized to 2 lines. Ionic info:

Ionic:
   ionic (Ionic CLI)             : 4.9.0 (C:\Users\Cactus\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   NodeJS : v8.12.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 7
Comments: 15 (2 by maintainers)

Commits related to this issue

fix(alert): radio and checkbox labels wrap to next line (#27898) Issue number: resolves #17269 ---------  <!--... — committed to ionic-team/ionic-framework by liamdebeasi a year ago

Most upvoted comments

Yup, sorry to the delay in the response. Here’s our workaround:

// Applies a text wrap on ion options
.alert-tappable.alert-radio {
    height: auto;
    contain: content;
}

.alert-radio-label.sc-ion-alert-md,
.alert-radio-label.sc-ion-alert-ios {
    white-space: normal;
}

+33

plchampigny on Mar 8, 2019

For people that experience this same issue on Ionic v5, here is my workaround:

Styles to put in global.scss:

//  Force text-wrap on <ion-select>
ion-select::part(placeholder),
ion-select::part(text) {
  white-space: normal !important;
}
// Force text-wrap on <ion-select-option>'s when shown in an Ionic Alert
ion-alert.select-alert {
  // These widths are pretty arbitrary, so you're use-case(s) could required different widths:
  --width: 33vw !important;
  --max-width: 66vw !important;

  .select-interface-option .alert-radio-label,
  .select-interface-option .alert-checkbox-label {
    white-space: normal !important;
  }
}

elwinschmitz on Nov 4, 2021

@noctis03 I just had this issue now. I fixed it adding the code:

Yup, sorry to the delay in the response. Here’s our workaround:

// Applies a text wrap on ion options
.alert-tappable.alert-radio {
    height: auto;
    contain: content;
}

.alert-radio-label.sc-ion-alert-md,
.alert-radio-label.sc-ion-alert-ios {
    white-space: normal;
}

In the end of global.scss . It worked well, but I’m not sure if this is the best place to put it

rodrigosoareschaves on May 17, 2019

@Devendra0110 Inside every page folder there’s a scss that applies styles on that page only. See the attached screenshot.

with global.scss its working, thanks 😄

Agree with DanielBCR, that it is working only with the global.scss file, and not with the component scss. I also tried wrapping it in :host.

Here is the ionic info: Ionic:

Ionic CLI : 6.4.0 (/usr/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.0.7 @angular-devkit/build-angular : 0.803.26 @angular-devkit/schematics : 8.3.26 @angular/cli : 8.3.26 @ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 1.5.2 @capacitor/core : 1.5.2

Utility:

cordova-res : not installed native-run : not installed

System:

NodeJS : v13.12.0 (/usr/bin/node) npm : 6.14.4 OS : Linux 5.3

tim1016 on Apr 13, 2020