search

jquery-archive / jquery-mobile

jQuery Mobile Framework
https://jquerymobile.com
Other
9.69k stars 2.4k forks source link

Navbar Button Inner Text Overflow Problem in RC1 #3805

Closed jhaag75 closed 12 years ago

jhaag75 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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

jhaag75 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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

gcsantiago commented 11 years ago

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