Long Attribute Prompts and Mobile Devices

[lesliekirk]

Store has products that have very long attribute prompts. Some of the drop-down selects are 560 pixels wide.



Is there any way to wrap the text? It looks like the phone select only always a specific number of characters.

[Matt Zimmermann]

Hi Leslie,

Unfortunately, HTML doesn't support line wrapping on options values in a select list. This means that the standard UI, like the iPhone screen-shot, also does not support it. You would have to use some sort of JavaScript trickery to accomplish what you are looking for.

[Bruce - PhosphorMedia]

You could replace them with radio buttons. (You can get real tricky and make the drop down appear to be radio buttons...but that's a lot of lifting). Radio buttons are easier to manipulate on mobile devices as well.

[Matt Zimmermann]

Depending on the number of options, radio buttons are a preferred choice from a UI/UX standpoint. This is a great article on the pros and cons of radios vs selects. While not all the points are valid when it comes to e-commerce, it is very informative.

7 Rules of Using Radio Buttons vs Drop-Down Menus