I am getting space between jquery mobile menus -
why getting space between listview menu
here code
<script id="panel-init"> $( document ).on( "pagecreate", function() { $( "body > [data-role='panel']" ).panel(); $( "body > [data-role='panel'] [data-role='listview']" ).listview(); }); $( document ).one( "pageshow", function() { $( "body > [data-role='header']" ).toolbar(); $( "body > [data-role='header'] [data-role='navbar']" ).navbar(); }); </script>
html:
<div data-role="header" data-position="fixed"> <h3>order</h3> <a class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-back" data-rel="back"></a> <a class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-bars" href="#rightpanel"></a> </div>
here external panel defined out of page
<!-- right panel--> <div data-role="panel" data-position-fixed="true" data-display="push" data-theme="b" id="rightpanel"> <ul data-role="listview"> <li data-icon="delete"><a href="#" data-rel="close">close menu</a></li> <li><a href="#">acura</a></li> <li><a href="#">audi</a></li> <li><a href="#">bmw</a></li> <li><a href="#">cadillac</a></li> <li><a href="#">ferrari</a></li> </ul> </div><!-- /rightpanel -->
you need initialize header , panel once on document ready, not on pagecreate or pageshow:
$(function() { $( "body > [data-role='panel']" ).panel(); $( "body > [data-role='panel'] [data-role='listview']" ).listview(); $( "[data-role='navbar']" ).navbar(); $( "[data-role='header']" ).toolbar(); });
other code works:
working demo
note: if copied listview markup jqm dem site, might have ended
characters instead of regular spaces in markip. try erasing spaces between <li>
elements in source page, , see if problem goes away.