A scrolling List view inside a popup in jQuery mobile? - jquery-mobile

Question

In my phonegap application for Android, I have a popup contains a listview. This is my jsfiddle: http://jsfiddle.net/de2Lf/3/. The problems are that the scroll didn't appear on the emulator and the back button in the header is not working correctly.
Why is the scroll not working? What's wrong with my code? Please help me.
<div data-role="page" >
<div data-role="header" data-theme="b">
Main Page
</div>
<div data-role="content" >
<a href="#mypop" data-rel="popup" id="Btn1" data-role="button" data-inline="true" >Show POPUP </a>
</div>
<div data-role="popup" id="mypop" data-position-to="window" data-corners="false" data- overlay-theme="a" data-dismissible="false" >
<div data-role="header" data-theme="b" >
<a href="" id="ClosePOPUP" data-role="button" data-icon="custom-close-icon" data-iconpos="notext" class="ui-btn-right" ></a>
<div style="text-align:center;float:center;padding-top:11px;" ><font size="6px" color="white">pop</font></div>
</div>
<div id="scrollDiv" class="content" data-role="content" style="background-color: white;overflow-y:scroll; ">
<ul data-role="listview" style="margin: 0 !important;">
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
</ul>
</div>
</div>
</div>
java script
$(document.body).on('click','#ClosePOPUP', function(){
$('#mypop').popup('close');
});

Answer 1

This should do the trick for you
android:fadeScrollbars="false"
Or the other option is to update your CSS for the listview to have a height
height: 90% or max-height and overflow-y: scroll