I am developing a very simple app, with a list of element, inside a page. I am using PhoneGap with jQueryMobile. To make a comparison, I used both the jQuery Mobile Listview and a custom implementation of the list. Both the implementations share the same problem.
I think that an image is better than a thousand of words...
As you can see in the image, the header is below the status bar, fixed and in foreground. However, when I scroll the list, the elements override the phone status bar. What I would like to have, is that the elemnts "disapear" under the header, like in common iOS list.
How can I achieve this?
I put the relevant part of the CSS below.
[data-role=header]{
z-index:100;
width:100%;
position:fixed;
}
/*
* iOS7 NavBar Margin
*/
.myMarginClass
{
margin-top : 20px;
}
.myMarginClass > [data-role=header]{
z-index:100;
width:100%;
position:fixed;
}
.myMarginClass > [data-role=content]{
position:relative;
top:40px;
}
The relevant HTML
<div data-role="page" class="myMarginClass" id="docListPage">
<div data-role="header">
[...]
</div>
<div data-role="content">
[...]
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
[...]
</div>
</div>
Thanks for your help. Rik.