header not fixed on dynamic page
I use the following code on one of 10 internal pages. before I show the page 10 <li>s are dynamically appended to each of the 3 <ul>s in a pageshow event, and I do a listview refresh after this action.
On this scrolling page the footer stays fixed but the header does not.
What am I overlooking here?
I am using the latest version of JQuery mobile.
<div data-role="page" data-theme="b" id="statistics">
<div data-role="header" data-id="hdr" data-position="inline" data-position="fixed">
<a href="#home" data-icon="back" class="ui-btn-left">Back</a>
<h1>Statistics</h1>
</div>
<div data-role="content">
<ul id="ulGLTT" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
</ul>
<ul id="ulSLTT" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
</ul>
<ul id="ulTLTT" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
</ul>
</div>
<div data-role="footer" data-id="ftr" data-position="fixed">
<h1>Footer</h1>
</div>
</div>