Select element text overflow issue inside of listview on iOS #2647

Closed
anpsince83 opened this Issue Oct 7, 2011 · 16 comments

Projects

None yet

7 participants

@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)

@toddparker toddparker was assigned Oct 7, 2011
@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
Member
agcolom commented Oct 7, 2011

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
Member

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

@Wilto
Wilto commented Oct 11, 2011

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
Member
agcolom commented Oct 11, 2011

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.

@Wilto Wilto added a commit to Wilto/jquery-mobile that referenced this issue Oct 11, 2011
@Wilto Wilto Fixes #2647 — Ensures overflow: hidden is applied to .ui-btn-text ins…
…ide selects inside of listviews.
aefbe39
@toddparker toddparker pushed a commit that closed this issue Oct 11, 2011
@Wilto Wilto Fixes #2647 — Ensures overflow: hidden is applied to .ui-btn-text ins…
…ide selects inside of listviews.
aefbe39
@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/

@toddparker toddparker reopened this Dec 14, 2011
@jblas jblas was assigned Dec 14, 2011
@Wilto Wilto was assigned Feb 22, 2012
@toddparker

@Wilto - mind taking a look?

@Wilto
Wilto commented Mar 3, 2012

I’m unable to reproduce this on any of the platforms mentioned above. Is anyone seeing this issue in 1.1rc1?

@agcolom
Member
agcolom commented Mar 4, 2012

Here is the above fiddle updated to use 1.1rc1 and I can still see the issue.

I've made the test even longer so you can check in full screen version in portrait. On both pull-down menus, get the second (longer) option. I can reproduce on iPad 2 iOS 4.3.3

http://jsfiddle.net/agcolom/V6Yv2/7/show/

@Wilto Wilto added a commit that closed this issue Mar 5, 2012
@Wilto Wilto Fixes #2647, once and for all. overflow: hidden on text inside select…
… menus was being ignored on iPad Safari specifically.
48e7fd6
@Wilto Wilto closed this in 48e7fd6 Mar 5, 2012
@Wilto
Wilto commented Mar 5, 2012

Count it!

Appreciate it if you guys could recheck this for me. I was finally able to recreate this issue on our iOS5 (non-emulated iPad only, weirdly enough) using @agcolom’s jsfiddle. It’s a little on the inexplicable side—slightly different inheritance between iPad and iPhone Safari?—but this fix seems to do the trick in any case.

@agcolom
Member
agcolom commented Mar 5, 2012

@Wilto please don't hate me... I can still see the bug on my iPad2! But sometimes it seems the master takes a while to sync? So I'm hoping this is the case and I just need to wait and try again?

@agcolom
Member
agcolom commented Mar 5, 2012

@Wilto yes your change is not yet appearing in http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css
so that's why I'm still seeing the issue using my jsfiddle.

@Wilto
Wilto commented Mar 5, 2012

Whew, okay. I was about to write the CSSWG about adding !superimportant.

@agcolom
Member
agcolom commented Mar 6, 2012

@Wilto you are a !superstar It is fixed in latest (not in 1.1.0-rc1). New jsfiddle: http://jsfiddle.net/agcolom/V6Yv2/8/show/

on another point, if you look at this on the iPad in portrait, you'll see the page doesn't take the whole viewport space... this was reported last week or the week before as an issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment