Ion-select text wrap not working-How to overwrite the white-space property

Ionic Framework ionic-v3
#1

Hi - I can’t figure out how to wrap my text in my ion-select. Can anyone help me overwrite the white-space property?

My HTML

      <ion-option value="PCIP01"> "Agriculture, Agriculture Operations, and Related Sciences"</ion-option>
      <ion-option value="PCIP03"> "Natural Resources and Conservation"</ion-option>
      <ion-option value="PCIP04"> "Architecture and Related Services"</ion-option>

My CSS

.alert-checkbox-label {
white-space: normal !important;
}

But the CSS is not being applied. Please help.

My result
image

1 Like
#2

Have you solved? I need that too!

#3

You should just be able to apply the text-wrap attribute to ion-option:

<ion-option text-wrap value="42">The Answer</ion-option>

#4

I have not found a solution. text-wrap doesn’t seem to be working on ion-option. Maybe a bug?

#5

Same here, with last release.

#6

Hello, I solved it from the css of the page

.alert-ios .alert-radio-label{
white-space: pre-line;
}

.alert-md .alert-radio-label{
white-space: pre-line;
}

.alert-wp .alert-radio-label{
white-space: pre-line;
}

3 Likes
#7

Didn’t figure out how to text-wrap but figured out a work around. On ion-select, added a min-width css property.

#8

Still not working for me…Not sure why.

1 Like
#9

I had the same error, try to implement a custome class css in selectedOption, for more information read this: [https://ionicframework.com/docs/v2/api/components/select/Select/] and this: [https://ionicframework.com/docs/v2/api/components/action-sheet/ActionSheetController/#create]

in the part of cssClass, good luck :wink:

(https://ionicframework.com/docs/v2/api/components/action-sheet/ActionSheetController/#create)
(https://ionicframework.com/docs/v2/api/components/select/Select/)

#10

Thanks. I got it working by adding the above css to the main app.scss file.

4 Likes
#11

In the ion- select - option control , the ion-label contrl gives the ‘white-space: nowrap’ by default. To overwrite this add below code to the app.scss style sheet (main css file inside the app folder)

ion-label{
white-space:normal !important;
}

This will solve the issue. :slight_smile:

1 Like
#12

I ended up adding

.alert-md .alert-radio-label,
.alert-ios .alert-radio-label
{
white-space: normal !important;
}

But had to add it to the app.scss trying to add it just to the component did not work.

3 Likes
#13

I added that white-space rule to the SELECT element and it worked out! Thank you!
This is what I got here (add !important to every rule if necessary):

.item-select-customizado select {
    position: relative;
    max-width: 100%;
    white-space: pre-line;
    text-align: left;
}
1 Like
#14

I use (on .css):
ion-select{
max-width: 100% !important;
}

2 Likes
#15

Hi nbcesar, were you able to find any solution to this? I tried this, but it did not work.

#16

Thanks JaaG, it worked for me.

#17

Try this…
ion-select{
max-width: 100%;
width: 100%;
}

#18

Just try this
.alert-radio-label.sc-ion-alert-md {
white-space: pre-line !important;
}

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

#19

Came across this issue myself today; the correct way to do it is to set the [selectOptions] with a cssClass value

You can then target this directly in the app.scss:

ion-alert {
  &.yourClass{
    .alert-radio-label {
      white-space: unset;
    }
  }
}
#20

In this is used for ion-select in radio button, for me, i want ion-select checkbox text wrapping.