popup with scrollbars, can't select checkbox at bottom of popup

popup with scrollbars, can't select checkbox at bottom of popup

Hi everyone

I've got a popup that I need to constrain the size of. Within the popup there is a checkbox at the bottom, and whenever I try to click this checkbox, the dialog scroll jumps to the top position (and the checkbox remains unchecked).

Thanks for any suggestions you can give

Code follows

  1. <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  2. </head>

  3. <a href="javascript:openPersonDialog();">Open the Dialog</a>
  4.     <div id="personDialog" class="ui-content" data-position-to="window" style="padding-bottom: 2em; height:400px; max-height:400px; overflow-y:auto; min-width: 600px; max-width: 600px;" data-role="popup" data-theme="a" data-overlay-theme="b" data-dismissible="false">
            <input type="hidden" autofocus="autofocus" />
            <input type="text" id="txtA" />
            <div style="height:700px; background-color:lightblue;">
  5.         </div>
            <input id="chkA" type="checkbox" />
            <label for="chkA">Test Checkbox</label>
        </div>
  6. <script type="text/javascript">

  7.     function openPersonDialog()
        {
            $('#personDialog').popup('open');
        }
  8. </script>