Dynamic content in Lungo 2.1 does not update the scroll container in PhoneGap.

[emmerich]

I'm using PhoneGap, and see the issue on Android.

I have the following section defined:

<section id="results">
  <article id="result-list" class="active list scroll">
    <ul> <!-- dynamically generated content --> </ul>
  </article>
</section>

I dynamically generate the contents of the list, and then dynamically add elements to the list. The scroll works for when I first populate the list, but doesn't update when I add more elements.

Is there some method I can call to tell Lungo to update the scroll container?

[tmpduarte]

same here. scrollHeight gets updated, but I can't scroll more than the first content loaded, I managed to force the scrollTop to increase but as soon as I execute drag with the finger on the screen the view goes up again

[soyjavi]

All our projects have dynamic content and we have never encountered this error. Could you share an example on a site to prove it?

[emmerich]

The Lungo implementation of PropertyCross, found here is a good example. When the project is built and deployed to Android using PhoneGap, loading more properties does not update the container.

The page contains a list which is actively updated through a Knockoutjs binding. When elements are added to the list, the list grows, but the scroll container does not grow with it.

[otupman]

Having worked with @tmpduarte on his issue, I can only assume that this is due to some interesting issue that involves Lungo.

Here's an example where this does not work (on Android 4.1.1 with the stock browser):

http://dl.dropboxusercontent.com/u/50968026/lungo-notworking.html

Tap on the Generate button - it'll generate a list of Item "1.x" items. Tap on the Generate button again - this should append to the list a series of "2.x" items but they do not display (they are present in the DOM). Tap on the Generate button for a third time (generating "3.x" items) and scroll down - now you'll see the 2.x items that were generated by the second tap.

Here's the same example but with the Lungo CSS removed, but in this example the item generation works as expected.

https://dl.dropboxusercontent.com/u/50968026/nolungo-working.html

If you take a look at the code, you'll see that the code generating & appending is running it within a function called via setTimeout - this is crucial. Without setTimeout it will append items as expected. The setTimeout is here to mimic making an HTTP call.

[otupman]

@emmerich - I have a nasty hack (that makes me feel quite dirty):

if(Lungo.Core.environment().os.name.toLowerCase() === 'android') {
  angular.element($$('#timeline-article')[0]).css('overflow-y', 'hidden');
  // Browser must be allowed perform stuff from the hidden first so we delay the revert
  setTimeout(function() { 
    angular.element($$('#timeline-article')[0]).css('overflow-y', 'scroll');
  }, 1);
}

Don't judge me :wink: but it does work for us.

[emmerich]

Yeah, I had thought of doing something similar although didn't have the time to discover what the "magic CSS" property was to toggle. Thanks for the suggestion.