jQuery Mobile 1.3 panel - double scrollbar bug
Hi,
Today I wanted to implement one of JQM's neat new features, namely a panel. However, I've run into some unexpected behaviour: when I include a custom ThemeRoller .css file (v1.3), two scrollbars appear where there should be none. It only seems to happen when I place my custom theme after JQM's standard .css file (but when I place the custom theme before it, the theme doesn't load).
If anyone wishes to reproduce this:
- <!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="custom-theme-here.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="page1">
<div data-role="panel" data-display="reveal" data-theme="a" id="menu">
<ul data-role="listview" data-theme="b">
<li data-role="list-divider">Divider</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div data-role="header" data-theme="b">
<a data-icon="bars" data-iconpos="notext" data-inline="true" data-mini="true"
data-role="button" data-theme="c" href="#menu"></a>
<h1>Title</h1>
</div>
<div data-role="content">
...
</div>
</div>
</body>
</html>
Is this happening to anyone else, and if so, is there a known fix?
Kind thanks