`scrollable` not working for dynamically inserted list item from Javascript
Opened this issue · 2 comments
itree commented
Scrollable list works when the list is a static list. However, if the <li>
is dynamically inserted into the <ul>
in tt.EVENTS.PAGE_START
the list won't scroll beyond the last item of the statically created list.
Below are the example js code and html. Please let us know how to make dynamically generated list scrollable. Thanks.
tt.on(tt.EVENTS.PAGE_START, 'home', function() {
console.log("I'm on the home page!");
for(var i = 0; i<=100; i++){
console.log(i);
var li = document.createElement('li')
li.innerHTML = i + ' akdsfj kadsfj';
li.setAttribute(
'class',
'topcoat-list__item'
)
li.setAttribute(
'data-rel',
'buttonExample'
)
var span = document.createElement('span')
span.setAttribute(
'class',
'chevron'
)
li.appendChild(span);
$('#demoList').append(li)
}
});
<div class="content scrollable" data-scroll-x="false" data-scroll-y="true"> <!-- containers with the class scrollable are automatically hooked into iscroll -->
<div class="topcoat-list__container">
<ul id="demoList" class="topcoat-list list">
<li class="topcoat-list__item" data-rel="buttonExample">
<span class="formItem">Buttons</span><span class="chevron"></span><span class="count"></span>
</li>
</ul>
</div>
</div>
itree commented
Also just realize that topcoat-touch is using iscroll
Seems like this is the thing to do.
http://iscrolljs.com/#refresh
However, all that is hidden from us. Would good to know the preferred way to resize the scroll in topcoat-touch
thanks.
itree commented
Ok I figured it out in a hackaish way. It would be good to do it in topcoat-touch documentation to refresh the scrollable/iscroll object
// call the code below at end of loop
setTimeout(function () {
var myScroll = new IScroll('.content');
myScroll.refresh();
}, 0);