Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
anpsince83 opened this Issue · 16 comments

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

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

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

@toddparker toddparker reopened this
@jblas jblas was assigned
@Wilto Wilto was assigned
@toddparker

@Wilto - mind taking a look?

@Wilto

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

@agcolom
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/

@Wilto Wilto closed this issue from a commit
@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
@Wilto

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

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

@Wilto

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

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