New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
7 participants
@anpsince83

anpsince83 commented Oct 7, 2011

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)

@ghost ghost assigned toddparker Oct 7, 2011

@johnbender

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Oct 7, 2011

Contributor

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

Contributor

johnbender commented Oct 7, 2011

@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

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Oct 7, 2011

Member

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.

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

This comment has been minimized.

Show comment
Hide comment
@anpsince83

anpsince83 Oct 7, 2011

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

anpsince83 commented Oct 7, 2011

@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

This comment has been minimized.

Show comment
Hide comment
@addyosmani

addyosmani Oct 9, 2011

Member

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

Member

addyosmani commented Oct 9, 2011

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

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Oct 11, 2011

Contributor

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/

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@anpsince83

anpsince83 Oct 11, 2011

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

anpsince83 commented Oct 11, 2011

@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

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Oct 11, 2011

Member

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.

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.

@anpsince83

This comment has been minimized.

Show comment
Hide comment
@anpsince83

anpsince83 Dec 12, 2011

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/

anpsince83 commented Dec 12, 2011

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

@ghost ghost assigned jblas Dec 14, 2011

@ghost ghost assigned Wilto Feb 22, 2012

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 22, 2012

Contributor

@Wilto - mind taking a look?

Contributor

toddparker commented Feb 22, 2012

@Wilto - mind taking a look?

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Mar 3, 2012

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Mar 4, 2012

Member

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/

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 closed this in 48e7fd6 Mar 5, 2012

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Mar 5, 2012

Contributor

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.

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Mar 5, 2012

Member

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

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

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Mar 5, 2012

Member

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

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

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Mar 5, 2012

Contributor

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

Contributor

Wilto commented Mar 5, 2012

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

@agcolom

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Mar 6, 2012

Member

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

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