[IONIC] ion-select long option viewing issue

I have recently faced an issue with long select options. When the option in the select is very long, let say a sentence with more than 15–20 characters, only half of the option is visible, rest gets trimmed.

Long options gets trimmed

I have tried multiple solutions, like wrap-text, etc., but nothing worked. After some more google-ing, I have found a work around for this issue.

Solution

Add the following styles in the global.scss file:

#ForRadioOptions
.alert-radio-label.sc-ion-alert-md,
.alert-radio-label.sc-ion-alert-ios {
white-space: normal;
}
.alert-tappable.alert-radio {
height: auto;
contain: content;
}
#ForCheckbox
.alert-checkbox-label.sc-ion-alert-md,
.alert-checkbox-label.sc-ion-alert-ios {
white-space: normal;
}
.alert-tappable.alert-checkbox {
height: auto;
contain: content;
}

This will do the text wrapping thing, help to fit the options inside the view area. Perfectly align the long and lengthy options.

After using the work-around

Feel free to share what else you have explored for theming in Ionic Framework

Contact me at
Email: rajesh.mishra2295@gmail.com

--

--

--

A coder by profession, sharing life experiences with the Words. Learning more about Productivity, Habits, Decision Making and ambitious towards self freedom.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

GarudaSwap.Finance is a brand new, audited, next-generation yield farm on BSC. Earn

Configuration of apache webserver on the top of docker container with the help of ansible playbook

What the heck is gevent?

FalconFriday — DCOM & SCM Lateral Movement — 0xFF05

My First Coding Mistake Taught Me 5 Precious Lessons About the Software Profession

A man standing by a peaceful mountain and lake

REI DAO Subgraph Optimization, Chinese New Year Airdrop for REI Network Chinese Community

Why I Started Coding

Modern Android App Deployment

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajesh Mishra

Rajesh Mishra

A coder by profession, sharing life experiences with the Words. Learning more about Productivity, Habits, Decision Making and ambitious towards self freedom.

More from Medium

Sailing Experience in San Francisco and Some Tips

ZBook Studio G8 — My first experience with my Z by HP hardware

Mugiwara/ One Piece

The Best Boba in San Francisco

The top Boba shops in San Francisco.