I am currently working on a simple app that includes a list of elements within a page. I am utilizing PhoneGap in conjunction with jQueryMobile for this project. After testing both the jQuery Mobile Listview and a custom list implementation, I have encountered a common issue.
They say a picture is worth a thousand words...
As depicted in the image, the header remains fixed and displayed above the status bar. However, when scrolling through the list, the elements end up overlapping the phone's status bar. Ideally, I would like the elements to be hidden under the header, similar to how it appears in standard iOS lists.
Is there a way to achieve this desired effect?
Below is the relevant section of CSS code:
[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 corresponding HTML structure:
<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>
Your assistance is greatly appreciated. Regards, Rik.