There is a bug with ion-select-option not wrapping text Ionic 4.0

Ionic Framework ionic-v3
1

I think there’s a bug in Ionic. I’ve been working a few days to resolve this.

The issue is using ion-select. When I use the ion-select/ion-select option elements I the text will not wrap.
Using this code

      <ion-select [(ngModel)]="selection" (ionChange)="optionsFn(selection)">
        <ion-select-option [value]="itinerary" *ngFor="let itinerary of matchItinerary">{{itinerary.destination}} - {{itinerary.startDate | date: "MM/dd/yy"}} - {{itinerary.endDate | date: "MM/dd/yy"}}</ion-select-option>
      </ion-select>

I get the following

Screenshot_20191211-215439_Buddy%20Pass
Screenshot_20191211-215439_Buddy%20Pass1076×975 286 KB

Even after I apply the online suggestion of adding white-space: pre-wrap; to the variable.scss.

However, when I use the regular select/option element then it works. Notice the 2d photo with the text wrapped

      <select [(ngModel)]="selection" (ionChange)="optionsFn(selection)">
        <option [value]="itinerary" *ngFor="let itinerary of matchItinerary">{{itinerary.destination}} - {{itinerary.startDate | date: "MM/dd/yy"}} - {{itinerary.endDate | date: "MM/dd/yy"}}</option>
      </select>

Screenshot_20191211-215952_Buddy%20Pass
Screenshot_20191211-215952_Buddy%20Pass1080×1669 299 KB

The problem with the second option is that it doesn’t populate the list…it doesn’t take the value when I don’t use the ionic elements.

2

Especially with styling-related issues like this, please take special care to get it in the right forum subcategory (and/or include your framework version number). Is this in the right place?

3

Try some css, it will workout