I'm using the following:
<div data-role="page" id="some_page"><div data-role="header" data-position="fixed" data-add-back-btn="true"><h1>List</h1></div><div data-role="content" id="some_div"><div class="example-wrapper" data-iscroll id="scrollable_list"><ul data-role="listview" id="unorderedlist"></ul></div></div><div data-role="footer" data-position="fixed" style="background-color:black"><div id="bottombuttondiv" data-role="navbar" style="background-color:black"><ul><li><a id="button1" href="javascript:goDoButton1();" >Button 1</a></li></ul></div></div></div>
htmlToAppend = "<li>" +"<a id=" + i + " " + cssColor + ">" + caption + '<br></a>" + "</li>";
"</li>";
contentForDisplay.concat(htmlToAppend);
I'm displaying it like this:
$('#unorderedlist').append(contentForDisplay);
$('#some_div').trigger('create');$("#scrollable_list").iscrollview("refresh");
All of that works just fine.
When I change my list element to this:
htmlToAppend = "<li>" + "<img id="+ i + " src=\""+imageUrl+"\" ></img><br>" +
"<a id=" + i + " " + cssColor + ">" + caption + '<br></a>" +
"</li>";
the first time the list displays with scrollbars and scrolling works but I am
never able to scroll to the bottom of the list. If I scroll past a certain point and
remove my finger from the screen, the display jumps back to a previous point higher
up in the list.
If I leave the screen and navigate back to it, everything works fine.
In both cases I'm calling the function to build the list in
$(document).on("pageshow","#some_page",
I am unsure what I'm doing wrong or how to fix it.
Has anyone faced a problem like this before? If you did, how did you solve it?
If you did not, how would you go about trying to solve it?