CODEWITHSUNDEEP
jquerylistviewjquery-mobilecordovascrollbar
Samik R
Samik R

Reputation: 1638

Scrollbar not visible in jquery mobile app

I am working on a jquery mobile app which uses phonegap. In the app, I am dynamically loading a listview in a page with number of items greater than what can be shown on a single screen. When viewing in android emulator (Android 2.2), the listview is shown fine, and I can swipe or use the buttons to scroll down, but the vertical scrollbar is not visible. Do I have to do anything special for the vertical scrollbar to show up?

When I open a static version of the page in a browser (Firefox), the scrollbar does show up, but the same static page loaded in the app on the android emulator doesn't show the scrollbar (i.e., it seems that the behavior is consistent and has nothing to do with the dynamic nature of loading the listview).

I am using jquery 1.7.1, JQM 1.1.1, phonegap 2.0 (all most recent versions).

Here is the page code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Conference List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="common/jquery.mobile-1.1.1.min.css" />
    <script type="text/javascript" charset="utf-8" src="common/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/cordova-2.0.0.js"></script>
</head>
<body>
<div id="conf-list" data-role="page">

    <div data-role="header">
        <a href="#" class="ui-btn-left" data-icon="delete" onclick="exit()">Exit</a>
        <a href="#" class="ui-btn-right" data-icon="refresh" onclick="downloadConfList(confFilePath)">Refresh</a>
        <span class="ui-title" />        
    </div><!-- /header -->

    <div data-role="content">
        <ul data-role='listview' data-inset='true'>
                <li data-role='list-divider'>Available Conferences:</li>
                <li data-icon='false'>
                        <a href='javascript:openConference(2010041801)'>
                                <h4>Conference A1 2010</h4>
                                From 2010-04-18 to 2010-04-20<br />
                                Orlando, FL, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2010110701)'>
                                <h4>Conference A2 2010</h4>
                                From 2010-11-07 to 2010-11-10<br />
                                Austin, TX, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2011111301)'>
                                <h4>Conference A3 2011</h4>
                                From 2011-11-13 to 2011-11-16<br />
                                Charlotte, NC, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2012041501)'>
                                <h4>Conference A4 2012</h4>
                                From 2012-04-15 to 2012-04-17<br />
                                Huntington Beach, CA, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2012101401)'>
                                <h4>Conference A5 2012</h4>
                                From 2012-10-14 to 2012-10-17<br />
                                Phoenix, AZ, USA
                        </a>
                </li>

        </ul>
    </div><!-- /content -->

</div><!-- /page -->
</body>
</html>

Upvotes: 4

Views: 3189

Answers (3)

Karl
Karl

Reputation: 3099

The solution by Chris Barr works perfectly for me: Please have a look at this:

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

Used in my application like this

// HTML

<ul data-role="listview" id="my-select-view" data-filter="true" style="max-height: 250px; overflow: scroll">
</ul>

// Javascript Code - add scroll behaviour to the listview in the popup; Interestingly it was enough to add the event listener without the code in the eventhandler for manipulating the scroll value

$('#my-select-view').on("touchstart", function(event) {                            scrollStartPos=this.scrollTop+event.touches[0].pageY;
                        });

$('#my-select-view').on("touchmove", function (event) {
                        });

Upvotes: 0

Saurabh
Saurabh

Reputation: 254

use iScroll to make perfect scrolling on all devices (Android,iOS,Windows, Blackberry etc..)

URL- http://cubiq.org/iscroll-4

example - http://lab.cubiq.org/iscroll/examples/simple/

Upvotes: 0

HBlackorby
HBlackorby

Reputation: 1336

Most likely, this has nothing to do with your HTML, JS or anything. Most mobile browsers by default hide inline scrollbars. I went through this myself with multiple projects. Because in mobile browsers like Safari you scroll using a swipe motion, they don't show any visible scrollbars. I would guess this is an effort to createa app-like experience.

Instead, you'll need to include some visual queue to the user that they can slide that area with swiping or buttons. The mobile browser is purposfully not rendering scrollbars anywhere, inline or otherwise.

Upvotes: 3

Related Questions