Unable to get scrollable div in JQM app

2 posts, 0 answers
  1. Denise
    Denise avatar
    13 posts
    Member since:
    Oct 2013

    Posted 12 Jun 2014 Link to this post

    Caveat: I'm a relative newcomer to mobile, jQuery, etc., so I may have some basic misconceptions.
    I've been trying to get a simple scrollable div to work.  I thought it should be pretty straight forward, but I've been unable to get it to work, either in the simulator, or on my Android phone.

    Finally I thought to try the same code in jsbin, and what do you know: I get a scrollbar!

    So why does this code sample produce a scrollable div on jsbin, but not in AppBuilder?   And what am I supposed to do to get a scrollable div in a mobile app?

    (BTW, I know about iscroll.js.  I tried to use it and also didn't get any scrolling.  It was working back from that that got me to this simpler example.)


  2. Kaloyan
    Kaloyan avatar
    871 posts

    Posted 17 Jun 2014 Link to this post

    Hello Denise,

    I checked the jsbin, provided by you.

    In order to test it inside AppBuilder application, I created a new jQuery Mobile project and replaced the whole <body> form its Index.html with the code from the <body> inside the above mentioned jsbin. This resulted in the following:
    <!DOCTYPE html>
        <meta charset="UTF-8" />
        <title>Hello, World</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
        <link href="styles/main.css" rel="stylesheet" />
        <script src="cordova.js" type="text/javascript"></script>
        <script src="jquery-mobile/js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
            <div id="main-page" data-role="page">
                <div data-role="header" data-position="fixed">
                    <h1>Next Ferry</h1>
                <div id="mainlist" data-role="main" role="main" class="ui-content">
                    <div id="wrapper">
                            <p>Main Content will be here.</p>
                            <p>This is a longish-page, with a bunch of content.</p>
                            <p>There is enough content to require scrolling</p>
                            <p>Really, there is.</p>
                            <p>Mary saw a little lamb, little lamb, little lamb. Mary saw a little lamb, wool
                                as white as snow. Everywhere that Mary went, the lamb was sure to go. </p>
                            <p>Somewhere, over the rainbow, way up high. Somewhere over the rainbow..how does it go?
                                When you wish upon a star, da-da-da-ta-da-ta-da. I don't remember this at all! </p>
                                Down by the river, I <b>shot</b> my baby!
                            <p>Bye, bye Miss American Pie; drove my Chevy to the levee but the levy was dry; And good ol'
                                boys were drinking whiskey and rye, singin' "This will be the day that I die,
                                This will be the day that I die."
                            <p>Ramblin Rose, you're a store-bought woman.</p>

    And it worked as expected both in the AppBuilder simulator and on actual Android device. I have attached my project for clarification.

    Further, I noticed that in the jsbin, you are missing a reference to cordova.js which is mandatory for Cordova hybrid applications. So, please try if adding this line inside your AppBuilder project will solve the issue:
    <script src="cordova.js" type="text/javascript"></script>

    I hope this helps. Please, let me know if I can be of further assistance.


    Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!

Back to Top