PhoneGap JQuery Mobile Application - Overflow Issue

I am developing a PhoneGap application using JQuery Mobile.

I have header & footer NAVBAR's. And In the content section I have this HTML:

<div data-role="content"  class="MainContent"  style="overflow:hidden; padding-top: 0px;">
    <ul data-divider-theme="b" data-role="listview" data-inset="true" class="MainMenu">


The List is dynamically created and works normally fine. However in some cases the overflow:hidden doesn't appear to be working and Header / Footer start moving along with the contents of the main body and become invisible.

Anyone has any idea please?


Adding data-tap-toggle="false" has worked for me. Thanks @NijilNair

Style is needed to remove extra space on the top.

Need Your Help

How to consume WCF WebServices from PHP?

.net php wcf soap

I have to consume a WCF WebServices but the WSDL contains bindings that PHP doesn't support also.

Django template question

python django django-templates

How can I achieve this using the Django template system: