nbcesar
February 12, 2017, 5:07am
#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
1 Like
Have you solved? I need that too!
You should just be able to apply the text-wrap
attribute to ion-option
:
<ion-option text-wrap value="42">The Answer</ion-option>
I have not found a solution. text-wrap doesn’t seem to be working on ion-option. Maybe a bug?
Same here, with last release.
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
sabbyt
March 8, 2017, 8:13am
#7
Didn’t figure out how to text-wrap but figured out a work around. On ion-select, added a min-width css property.
Still not working for me…Not sure why.
1 Like
Thanks. I got it working by adding the above css to the main app.scss file.
4 Likes
Jubish
October 10, 2017, 5:56am
#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.
1 Like
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
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
JaaG
June 12, 2018, 10:36pm
#14
I use (on .css):
ion-select{
max-width: 100% !important;
}
2 Likes
Hi nbcesar, were you able to find any solution to this? I tried this, but it did not work.
Thanks JaaG, it worked for me.
Try this…
ion-select{
max-width: 100%;
width: 100%;
}
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;
}
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;
}
}
}
In this is used for ion-select in radio button, for me, i want ion-select checkbox text wrapping.