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

[plchampigny]

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:

1. Create ionic 4 project
2. Add with 2 options: 1 with very long text and 1 with short text
3. 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

[manucorporat]

Can you help figure out what CSS needs to change to fix this issue?

[plchampigny]

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;
}

[GeometricProgress]

Hi
I have the same problem, but the workaround is not working. What was your source code. Mine is:

<ion-item> <ion-label text-wrap position="stacked">How familiar are you with investing and the concept of investing?</ion-label> <ion-select> <ion-select-option value="1">Not at all</ion-select-option> <ion-select-option value="2">Familiar with basic investing</ion-select-option> <ion-select-option value="3" >Knowledgeable and experienced</ion-select-option> </ion-select> </ion-item>

[rodrigosoareschaves]

@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

[Doomkyn]

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;
}

This works great for me.

[Devendra0110]

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;
}

It does not work with interface="action-sheet" attribute given in ion-select. And, I want to apply this CSS in a single page not globally how to do that?

[Doomkyn]

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

[DanielBCR]

@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 :D

[tim1016]

@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 :D

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

[godenji]

Likewise, the suggested workaround only applies to global.scss, not at component level.

[elwinschmitz]

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;
  }
}