Skip to content
This repository

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

Closed
anpsince83 opened this Issue October 07, 2011 · 16 comments

7 participants

anpsince83 Todd Parker Kin Blas Mat Marquis John Bender Anne-Gaelle Colom Addy Osmani
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)

John Bender

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

Anne-Gaelle Colom
Collaborator

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.

Addy Osmani

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

Mat Marquis

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!

Anne-Gaelle Colom
Collaborator

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.

Mat Marquis Wilto referenced this issue from a commit in Wilto/jquery-mobile October 11, 2011
Mat Marquis Fixes #2647 — Ensures overflow: hidden is applied to .ui-btn-text ins…
…ide selects inside of listviews.
aefbe39
Todd Parker toddparker closed this in aefbe39 October 11, 2011
Todd Parker toddparker closed this in c9e6c45 October 11, 2011
Timmy Willison timmywil referenced this issue from a commit October 11, 2011
Mat Marquis Fixes #2647 — Ensures overflow: hidden is applied to .ui-btn-text ins…
…ide selects inside of listviews.
6fc6d12
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/

Todd Parker toddparker reopened this December 14, 2011
Todd Parker

@Wilto - mind taking a look?

Mat Marquis
Wilto commented March 02, 2012

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

Anne-Gaelle Colom
Collaborator

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/

Mat Marquis Wilto closed this issue from a commit March 05, 2012
Mat Marquis Fixes #2647, once and for all. overflow: hidden on text inside select…
… menus was being ignored on iPad Safari specifically.
48e7fd6
Mat Marquis Wilto closed this in 48e7fd6 March 05, 2012
Mat Marquis
Wilto commented March 05, 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.

Anne-Gaelle Colom
Collaborator

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

Anne-Gaelle Colom
Collaborator

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

Mat Marquis
Wilto commented March 05, 2012

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

Anne-Gaelle Colom
Collaborator

@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
Something went wrong with that request. Please try again.