CSS Bug (and solution) in navbar
Hi. This always happened (since old versions) and I always fixed by removing horizontal scrollbar with java (for android apps and using phonegap layer for jqm) but today I tried to fix it in CSS.
In the navbar, if you have "a" elements (buttons) and if you have odd elements (lets say 3), the width in the last "a" element is always longer than the parent container, causing the browser to show an ugly horizontal scrollbar when touching and dragging inside the page, as shown in
http://tinypic.com/r/eivb0l/6
example code:
<body>
<div data-role="page">
<!-- HEADER -->
<div data-role="header" data-position="fixed">
<!-- Menu -->
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" class="ui-btn-active ui-state-persist">One</a></li>
<li><a href="two.html">Two</a></li>
<li><a href="three.html">Three</a></li>
</ul>
</div>
</div>
<!-- CONTENT -->
<div data-role="content">
...
</div>
<!-- FOOTER -->
<div data-role="footer" class="ui-bar" data-position="fixed" data-visible-on-page-show="false"
data-tap-toggle="false">
<h3>Bla</h3>
</div>
</div>
</body>
SOLUTION I found:
.ui-header .ui-navbar li:last-child .ui-btn {
width: 100%;
}