在jquery移动页面中添加面板会使页面滚动在卡住的设备上

Question

I am new to Jquery Mobile and Phonegap. I have created an app with multiple pages within one HTML page as mentioned by the Jquery Mobile site for developing apps in mobile.

I have also added panels for each pages. My problem is, after adding the panel, the scrolling up/down of the whole page becomes stuck. As in, you have to drag twice to scroll the page. This occurs when you run the app on iPhone/iPad and no problem on browser. This issue does not exist when the panel is removed from the page.

I have included the panel as a sibling of Header, Content and Footer, and also the panel is working fine.

What could be the reason? This is the panel html

<div data-role="panel" id="menuPanel3" data-position="right" data-display="push" data-theme="a">
<div data-role="controlgroup" data-corners="false">
<a href='javascript:void(0)' data-corners="false" data-role=button onclick="nav('#wallet')" data-theme="a">Wallet</a>
<a href='javascript:void(0)' data-corners="false" data-role=button data-theme="a">Settings</a>
<a href='javascript:void(0)' data-corners="false" data-role=button data-theme="a">About Us</a>
<a href='javascript:void(0)' data-corners="false" data-role=button onclick=logout() data-theme="a">Logout</a>
</div> 
</div><!-- /panel -->

When i remove the above block from the page block, scrolling becomes fine.

Following are the styles applied..

<style>
    /*this block should go in the styles.css file*/
    .ui-panel-inner {
        padding:0px; /*make the buttons flush edge to edge*/
    }
    .ui-controlgroup {
        margin:0; /*make the buttons flush to the top*/
    }
    #header {
        height:54px;
    }
    #bars-button {
        margin:7px;
    }
</style>

Please help...

Answer 1

A panel must be a sibling to the header, content and footer elements inside a jQuery Mobile page. You can add the panel markup either before or after these elements, but not in between. A panel cannot be placed outside a page, but this constraint will be removed in a future version.

Here is an example of the panel before the header, content and footer in the source order:

<div data-role="page">          

    <div data-role="panel" id="mypanel">
        <!-- panel content goes here -->
    </div><!-- /panel -->

    <!-- header -->
    <!-- content -->
    <!-- footer -->

</div><!-- page -->

Follow these instructions EXACTLY and all will be fine: http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/#

I used panel recently had no trouble whatsoever: http://radio.idev.ge

The problem was solved by adding 'data-position-fixed="true"' to the panels.