jQM iScrollView Height

Vote count:

0

I have tried using iScrollview in my jQM project. I have problem with the height of the scroller. When I follow the exact example provided by: http://ift.tt/1pkXrpi

Everything working as expected. But if I would like to add a new DIV before or after the scroller, the height of the scroller will be push by the extra height of the new DIV.

This is the jsfiddle of the problem: http://ift.tt/1vWhiNs

The following is how I add a new DIV and its CSS:

<div data-role="content">
        <div id="topDiv">Top DIV<br>For Toolbar</div>
        <div class="example-wrapper" data-iscroll>
            <ul data-role="listview">
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>                
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>                
            </ul>
        </div>          
    </div>

It's CSS:

#topDiv {
    height: 50px;
    background-color: gray;
    padding: 20px;
}

asked 43 secs ago

user3053891

72