ion-select with long text options doesn't render properly on ios and md
See original GitHub issueBug 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
Issue Analytics
- State:
- Created 5 years ago
- Reactions:7
- Comments:13 (1 by maintainers)
Top Results From Across the Web
[IONIC] ion-select long option viewing issue | by Rajesh Mishra
I have recently faced an issue with long select options. When the option in the select is very long, let say a sentence...
Read more >ionic-4 Text-wrap on ion-select-option - Stack Overflow
On Ionic 5, the only thing that worked for me was: .alert-radio-label.sc-ion-alert-md { white-space: normal !important; }.
Read more >Ion-select text wrap not working-How to overwrite the white ...
Issue: 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- ......
Read more >Ionic-4 Text-Wrap On Ion-Select-Option - ADocLib
if you are with Ionic 4 then just use class"ion-text-wrap" for wrapping text anywhere in element. By default, select uses the AlertController API...
Read more >Ionic 5 UI Components Properties - Appery.io
Select ; Spinner; Text; Textarea; Toggle; Toolbar.. Custom UI Components. Note that you are not limited to ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yup, sorry to the delay in the response. Here’s our workaround:
For people that experience this same issue on Ionic v5, here is my workaround:
Styles to put in
global.scss
: