Ionic 4 Text-wrap Ion-Select-Options

Ionic Framework
1

With Shadom DOMS now in place, how do you apply a word-wrap in Ion-select options especially when you have the alert controller window like below?
34%20pm

2

did you find a solution?

3

@karvanj have you tried using whitespace normal or overflow wrap in your scss?

4

I did first try setting whitespace property on the inner class for pop over but it ended up getting messed up. I gave up and used angular materials drop down instead

5

just try this in your app.scss
.alert-radio-label.sc-ion-alert-md {
white-space: pre-line !important;
}

.alert-radio-label.sc-ion-alert-ios {
white-space: pre-line !important;
}

6

this is not working on ionic 5, is it?

7

do this in your global.scss,

.alert-checkbox-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 !important;
}

.alert-checkbox-label.sc-ion-alert-ios {
    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 !important;
}
2 Likes
8

Thanks for the reply, you, awesome person.

9

welcome :slightly_smiling_face: :slightly_smiling_face:

10

Worked for me. Very nice