CODEWITHSUNDEEP
htmlcssionic-frameworkionic4
D.Hodges
D.Hodges

Reputation: 2069

ionic 4 ion-select-option text wrap

I'm unable to wrap the text in my ion-select-option.

  <ion-list>
    <ion-list-header>Select one of your work orders</ion-list-header>
    <ion-item>
      <ion-select [(ngModel)]="selection" (ionChange)="optionsFn(selection)">
        <ion-select-option [value]="work" *ngFor="let order of workOrder">{{order.destination}} - {{order.startDate | date: "MM/dd/yyyy"}} - {{order.endDate | date: "MM/dd/yyyy"}}</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-list>

I actually saw a solution using the following CSS

.alert-radio-label.sc-ion-alert-ios {
    padding-left: unset;
    padding-right: unset;
    -webkit-padding-start: 13px;
    padding-inline-start: 13px;
    -webkit-padding-end: 13px;
    padding-inline-end: 13px;
    white-space: pre-wrap;
}

If I add white-space: pre-wrap; in the console debugger the text from the ion-select will wrap successfully with the following:

enter image description here

The problem is if I add that to the css it doesn't take effect. So I'm not sure where it should be added. In another post someone suggested adding it to the app.css but I don't have a global app.css in my ionic 4 project.

Upvotes: 0

Views: 2031

Answers (1)

Monomachus
Monomachus

Reputation: 1468

As the alert html is outside of your component, you need to add it to the global CSS of your app... in Ionic 4 generated project you have global.scss that you can use for it, if you can't find it or it doesn't work... use the variables.scss, although I think you can just use global.scss.

Upvotes: 1

Related Questions