Security questions select menu cut off on small screens

Question

I have a set of security questions wrapped in a select menu. They are questions such as:

• What is your mother's maiden name?
• What is your dog's name?
• Etc.

On iOS and Android small screens, the text inside the select menu is being trimmed at the right edge. So, the text looks more like:

What is your mothe...

What is your dog...

My question is, how do you combat this? Is there a native way of reading long select menu options that I'm not aware of?

I should mention that I'd rather not add something like jQuery UI to the project at this point if at all possible (it may not be).

Thanks in advance.

Answer 1

After some research, I found the best solution was to do what was listed here and add an empty <optgroup> in the select menu. It doesn't look the greatest and is somewhat hacky, but it appears to work for now:

iOS and HTML

Android stock 4.4.2