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.