Select element text overflow issue inside of listview on iOS

[anpsince83]

Mobile Safari on iOS 4.3 has an issue rendering the text overflow correctly for enhanced selects inside of a listview list.

The text runs over and is clipped at the right edge of the select's button, rather than inside of the button, short of the arrow icon. Desktop browsers (Chrome, Firefox) handle this correctly. If you take that same select and place it outside of the listview, the text overflows as expected.

I tested with RC1 and B3, the issue is present in both. Not sure about earlier versions. Digging around in the CSS it looks like this rule is causing the issue:

.ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text { display: block; min-height: 1em; }

If you change it to .ui-select .ui-btn-text to display: inline it seems to solve the issue. Here are a couple of examples:

http://jsfiddle.net/anpsince83/hMsHC/ (showing issue)
http://jsfiddle.net/anpsince83/qNzw5/3/ (css overriding issue)

[johnbender]

@anpsince83

First and foremost, thank you for including a jsfiddle with your bug report (it's increasingly rare). I know I speak for everyone on the team when I say that it is greatly appreciated.

@toddparker

I'm able to reproduce on my Android 2.3 device but not the iOS emulator running 4.3.

[agcolom]

Hi all, I can reproduce on iPad2 running Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5.

[anpsince83]

@johnbender, no problem, just wanted to cover my bases :) As such, I should have clarified, I was testing on the iPad emulator and iPad2 running iOS 4.3.

@agcolom, thanks for adding that.

[addyosmani]

Another confirmation of this happening on iPad 2 (however oddly, not the emulator for me).

[Wilto]

Hey guys,

I was able to recreate this issue in my iOS emulator, and adding the display: inline specified above was causing some weirdness in IE and older versions of Firefox. It looks as though re-specifying overflow: hidden on those elements addresses the issue, though.

Before I submit a pull request, can someone who was seeing the issue take a look at the updated jsfiddle to confirm?
http://jsfiddle.net/hMsHC/7/

[anpsince83]

@Wilto, I can confirm applying overflow: hidden solves the issue in the iPad emulator as well as iPad2. I didn't even think of reapplying it, nice find!

[agcolom]

Hi, This looks fine (i.e. no text over edge of button) on iPad2 (same device as my ealier comment). I get the expected ellipsis just before the icon.

[anpsince83]

I finally got a chance to upgrade to 1.0 final and I'm still seeing this issue persist. I see this fix was slated for RC2, but it doesn't appear to be fixed in RC2, RC3 or 1.0 final. Can anyone else confirm this? I left in my own css override for this fix, so I didn't notice this until now, but it appears to remain in 1.0 final. Here is my original fiddle updated with 1.0 final and it does not appear to be fixed : http://jsfiddle.net/anpsince83/V6Yv2/