2

I have a select box where each option has the potential to be very long. On desktop it's fine, but on mobile the text gets cutoff at the end of each line with an ellipsis. I need to be able to show the full text, or else the options may not be clear to my users. If I can make the text wrap rather than cutting off that would be fine, but I don't know how to accomplish this since I'm not sure how the iPhone handles select elements.

Select options on iPhone

pnuts
  • 58,317
  • 11
  • 87
  • 139
Erica Stockwell-Alpert
  • 4,624
  • 10
  • 63
  • 130

1 Answers1

1

According to this StackOverflow answer, there is no way to change the styling of <select> elements on iOS, as their display styles are built into the browser and not modifiable via CSS.

This answer suggests that you can use a customizable replacement such as Chosen if you would like more control over the style of your <select> boxes.

Apparently Chosen doesn't support iOS. A comment on another answer recommends Selectize.js as an iOS-compatible replacement.

Community
  • 1
  • 1
Maximillian Laumeister
  • 19,884
  • 8
  • 59
  • 78
  • My page actually is already using Chosen (out-of-the-box login page from Insite), but it's not working on the iPhone. I stepped through it and it seems to think the browser is not supported; is_browser_supported returned false. – Erica Stockwell-Alpert Jul 27 '15 at 13:15
  • @user3784238 Looks like according to [this answer](http://stackoverflow.com/a/22016765/2234742), Chosen isn't compatible with iOS. A comment on that answer recommends using [Selectize.js](http://brianreavis.github.io/selectize.js/) instead. – Maximillian Laumeister Jul 27 '15 at 17:37