<div class="ui-page ui-page-active page" id="page-main" style="display: block;"> <header class="ui-header"> <h2 class="ui-title">UI Components</h2> </header> <div class="ui-content"> <!--After I added this button, the ui-listview below stop working, the listview can't scroll anymore.--> <button type="button" class="ui-more">More Options</button> <ul class="ui-listview" id="todo-list"> <li class="li-has-thumb-center" id="btn-add-todo"> <img src="/img/add_icon.png" class="ui-li-thumb-center"> </li> <li class="li-has-checkbox" > <label style="font-size:25px;"> <input type="checkbox"/> </label> </li> <li class="li-has-checkbox" > </li> <li class="li-has-checkbox" > </li> <li class="li-has-checkbox" > </li> <li class="li-has-checkbox" > </li> <li class="li-has-checkbox" > </li> <li class="li-has-checkbox" > </li> <li class="li-has-checkbox" > </li> <li class="li-has-checkbox" > </li> <li class="li-has-checkbox" > </li> <li class="li-has-checkbox" > </li> <li class="li-has-checkbox" > </li> <li class="li-has-checkbox" > </li> </ul> </div> <div id="moreoptionsPopupCircle" class="ui-popup"> <div id="selector" class="ui-selector"> <div class="ui-item show-icon" data-title="Show"></div> <div class="ui-item human-icon" data-title="Human"></div> <div class="ui-item delete-icon" data-title="Delete"></div> <div class="ui-item show-icon" data-title="Show"></div> <div class="ui-item human-icon" data-title="Human"></div> <div class="ui-item delete-icon" data-title="Delete"></div> <div class="ui-item fail-icon" data-title="Fail"></div> </div> </div> <script type="text/javascript" src="js/moreoptions.js"></script> </div>
If I delete the button, the listview can be scrolled.
If I add the button, the listview can't be scrolled.
How to fix that? Thanks for any reply.
You can checkout full project code here:
https://github.com/Hexor/HexList