Navbar Button Inner Text Overflow Problem in RC1 #3805

Closed
jhaag75 opened this Issue Mar 13, 2012 · 6 comments

Projects

None yet

5 participants

@jhaag75
jhaag75 commented Mar 13, 2012

I have discovered an issue with 1.1.0-rc.1 pertaining to text overflow for buttons on a navbar. The previous release 1.0.1 did not have this problem, but with the new 1.1.0-rc-1 any text string containing more than five characters is using text-overflow: ellipsis.

I created two test files using the CDN-hosted versions of each here:

JQM 1.0.1: http://gt12.adlnet.mobi/1.0.1.html

JQM 1.1.0-rc-1: http://gt12.adlnet.mobi/1.1.0-rc.1.html

I have replicated this on iOS 5.0.1 and Android 2.3.6 mobile browsers. This problem doesn't appear to occur on desktop browsers such as chrome or firefox. I'm guessing it has something to do with the new fixed toolbars that are CSS-based in RC1.

@seandesmond

I think this is a problem with the following sequence in [jquery.mobile.structure-1.1.0-rc.1.css]
"...
.ui-navbar .ui-btn-inner { padding-left: 2px; padding-right: 2px; }
...
.ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
..."

I believe the default .ui-btn-inner should come before any subsequent styling; as follows:
"...
.ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
...
.ui-navbar .ui-btn-inner { padding-left: 2px; padding-right: 2px; }
..."

Workaround is to put some CSS after [jquery.mobile.structure-1.1.0-rc.1.css], namely:

".ui-navbar .ui-btn-inner { padding-left: 2px; padding-right: 2px; }"

@jhaag75
jhaag75 commented Mar 14, 2012

It also occurs without using the structure version of the CSS so the core CSS must need it as well.

@jhaag75
jhaag75 commented Mar 15, 2012

I have also created two examples with custom icons. If you set data-iconpos="left" for any custom icons in a navbar the positioning is thrown off in RC1 as well.

JQM 1.0.1: http://gt12.adlnet.mobi/1.0.1-customicons.html

JQM 1.1.0-rc-1: http://gt12.adlnet.mobi/1.1.0-rc.1-customicons.html

@Wilto Wilto was assigned Mar 21, 2012
@Wilto
Contributor
Wilto commented Apr 2, 2012

This should be patched up following a handful of tweaks late last week and over the weekend—have a look now and let me know if anything is still looking off.

Thanks, guys!

@toddparker
Contributor

Closing as fixed, but chime if you're still seeing issues.

@toddparker toddparker closed this Apr 5, 2012
@gcsantiago

Im still having this behaviour even with the last release 1.2.0 on Windows with Chrome ! :S

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