jquery/web-jquery-mobile-theme-roller — Issue #76: ui-bar-x borders causing vertical scrollbars on Android
Author: frequent
Created: 2012-02-28 10:08:40+00:00
State: open

After switching to Themeroller CSS on my Android HTC, I noticed horizontal scrollbars also appearing on vertical scroll although my page should be exactly screen-width wide.

Please check the JQM docs - http://jquerymobile.com/test/docs/pages/ Firebug the header and you will see the header (ui-bar-f) only having top and bottom borders.

JQM-docs.css has .ui-bar-f like so:

.ui-bar-f {
border-top: 1px solid	#56A00E;
border-bottom: 1px solid #56A00E;
...

whereas my themeroller themes (but also in the JQM docs) go like this:

.ui-bar-a {
border: 1px solid	#2A2A2A /*{a-bar-border}*/;
...

This gives headers and footers an additional 1px on the left and right, causing horizontal scrollbars to appear on every vertical scroll. If I comment out this line everything is fine.

Not sure what places this class is also used - but if the JQM docs only need top and bottom wrapper it should be ok to switch to this, shouldn't it?