ionic 4 "ion-option" text wrap - css

Question

I am working with ionic 4 and i am having a problem trying to do a text wrap inside a "ion-select"
my select looks like this:
if i change my css directly on google chrome ( Style section on the "inspect element" menu) to "white-space: pre-wrap"
It looks like this:
and this is what i want to get.
on my HTML code i have this:
<ion-item>
<ion-label>Dirección de Entrega<a style="color: brown;">*</a></ion-label>
<ion-select [(ngModel)]="ordHerder.addressId" popover >
<ion-option style="white-space: pre-wrap !important;" *ngFor="let item of register_data.directions" value="{{item.recId}}" text-wrap>{{item.direction}}</ion-option>
</ion-select>
</ion-item>
and my css:
shopping-car-delivery {
.alert-ios .alert-radio-label{ white-space: pre-wrap !important;}
.alert-md .alert-radio-label{ white-space: pre-wrap !important;}
.alert-wp .alert-radio-label{ white-space: pre-wrap !important;}
}
Thanks :)

Answer 1

just add this in your app.scss if you are using ionic 4
.alert-radio-label.sc-ion-alert-md {
white-space: pre-line !important;
}
.alert-radio-label.sc-ion-alert-ios {
white-space: pre-line !important;
}

Answer 2

Adding this to app.scss worked:
ion-label {
white-space: normal !important;
}

Answer 3

Fixed it by overriding alert-radio-label.sc-ion-alert-md , alert-radio-label.sc-ion-alert-ios and updating whitespace to pre-line in page.scss
.alert-radio-label.sc-ion-alert-md {
padding-left: 52px;
padding-right: 26px;
padding-top: 13px;
padding-bottom: 13px;
flex: 1;
color: var(--ion-color-step-850, #262626);
font-size: 14px;
text-overflow: ellipsis;
white-space: pre-line;
}
Also, reduced font-size to 14px, since my text was around 35-40 characters.
.

Answer 4

If none of the above solutions works try root level css changes like below
:root {
ion-popover ion-select-popover ion-radio-group ion-item ion-label{
white-space: pre-line !important;
}
}

Answer 5

the css white-space should be extended to pre-line so your .scss would be
shopping-car-delivery {
.alert-ios .alert-radio-label{ white-space: pre-line !important;}
.alert-md .alert-radio-label{ white-space: pre-line !important;}
.alert-wp .alert-radio-label{ white-space: pre-line !important;}
}

Answer 6

if you are with Ionic 4 then just use class="ion-text-wrap" for wrapping text anywhere in element.
Ionic 4 CSS Classes Reference :- https://ionicframework.com/docs/layout/css-utilities
For Ionic 3 you can use class="text-wrap"

Answer 7

By default, select uses the AlertController API to open up the overlay
of options in an alert. The interface can be changed to use the
ActionSheetController API or PopoverController API by passing
action-sheet or popover, respectively, to the interface property.
To customize the ion-select options with interface="popover" in ionic, do the following:
Solution: Add the code in global.scss(Ionic4) and outside page-app tags in app.scss(Ionic3) so that the following css is accessible outside the component
.popover-content ion-list ion-label
{
font-size:12px !important;
}
Detailed Explanation:
The problem is that options inside ion-select are added as a Popover/Alert/Actionsheet.
The HTML code for showing the ion-select interface is produced outside the component i.e. outside the ion-router-outlet component.
So, any code you put inside your component's scss file to change looks of ion-select options will not reflect in the browser.
Example: How DOM looks like: (Ionic 4)
Ionic 3
This will change the look of ion-select option throughout the App
To customize it for different pages, I did it by adding and removing a custom class from the main app selector
ionViewDidEnter()
{
let appRoot:any=document.getElementById('myAPP');
this.renderer.setElementClass(appRoot,'customIonSelectCSS',true); //add
}
ionViewDidEnter()
{
let appRoot:any=document.getElementById('myAPP');
this.renderer.setElementClass(appRoot,'customIonSelectCSS',false); //remove
}

Answer 8

ion-select is using the alert to show the options, so you need to override the default styles
Step1:
.alert-tappable.sc-ion-alert-md.sc-ion-alert-ios {
display: contents !important;
}
by default, display: flex; change it to the display: contents !important;
Step2:
.alert-radio-label { white-space: pre-wrap !important; }
by default, white-space: nowrap; change it to white-space: pre-line !important;