Issue with scroller in Android

[Jan-Dirk]

This is the html code of one of my views in an Android app. What I have in this view is a listview (li-items are added dynamically) and when an item in the listview is clicked, the 'contenPageContainer' is made 'visisble'

<div data-role="view" id="tabstrip-home" data-title="MaxApp">

    <ul id="linksList" data-role="listview" data-style="inset">

    </ul>


    <div id="contentPageContainer" class="contentPageContainer" style="visibility:hidden">

        <div data-role="scroller" class="contentPageContainer" id="scrollContentPageContainer">

            <div id="eventTitle" class="contentPageHeader"></div>

            <div id="entryText"></div>

            <p><a id="btnOk" data-role="button" style="background-color: rgb(0, 111, 81);float:right;">Ok</a></p>

            <p> </p>

        </div>

    </div>

</div>

In the click event I call a function that sets the content of div 'eventTitle' and div 'entryText' and it sets visibility of div 'contentPageContainer' to 'visible'.

function showRssItem(selectedEntry) {

    document.getElementById("eventTitle").innerHTML = '<strong><p>' + entries[selectedEntry].title + '</p></strong>';

    var contentHTML = "";

    contentHTML += entries[selectedEntry].description;

    contentHTML = '<p><img src="images/menu_logo_maxgrip.png" /> ' + contentHTML + '</p>';

    contentHTML += '<p><a href="' + entries[selectedEntry].link + '">Read Entry on Site</a></p>';

    document.getElementById("entryText").innerHTML = '';

    document.getElementById("entryText").innerHTML = contentHTML;

    document.getElementById('contentPageContainer').style.visibility = 'visible';

}

This seems to work ok als long as the scrolling functionality of scroller is not needed. Ie. if div 'entryText' contains only a few lines of text there is no problem. The 'Ok' button is in view and when the user clicks it, the javascript code to close it is executed properly causing the div 'contenPageContainer' to hide again.

If it contains too much text to show in the div 'contentPageContainer' then the user has to scroll down to get the 'Ok' button in view. Closing still works fine, but when you click a differen listview item afterwards, then the container is shown, but eventTitle and entryText are not visible.

I have tried to solve that with this code, but to no avail.

var scroller = $("#scrollContentPageContainer").kendoMobileScroller();

scroller.reset();

scroller.movable.moveTo({x:0,y:0});

Clicking the listview item with many lines again, shows the bottom of the content and the 'Ok' button, but I can't scroll to the top of the text. Actually I can, but when I lift my finger from the screen, the scroller jumps back to the bottom.

Any suggestions what could be wrong?

To make it complete, here is the css code of the div 'contentPageContainer'

div.contentPageContainer

{

  display: block;

  background-color: #5EA491;

  color: #FFFFFF;

  position: absolute;

  top: 10px;

  left: 2%;

  width: 96%;

  height: 95%;

  -moz-border-radius: 5px;

  border-radius: 5px;

}

[Jan-Dirk]

Here is a code snippet that explains it better: http://jsbin.com/eforub/1/edit

How to use:
- Click the first link and browse 2 bottom, then click ok to hide the div
- Click the 2nd link, results in a div with no text
- Click the first link again, you will see that the 'Ok' button is in focus, but it shouldn't be. Also it is not possible to scroll to the top of the text.

If anyone is going to try it, I have noticed that Firefox and my mobile app (Phonegap) behaves as described here. Internet Explor seems to work different.