This is a migrated thread and some comments may be shown as answers.

Unable to get scrollable div in JQM app

1 Answer 39 Views
AppBuilder in-browser client
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Denise
Top achievements
Rank 1
Denise asked on 13 Jun 2014, 12:03 AM
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!
http://jsbin.com/hakepi/1/edit

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.)

thanks,

denise

1 Answer, 1 is accepted

Sort by
0
Kaloyan
Telerik team
answered on 17 Jun 2014, 12:59 PM
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>
<html>
<head>
    <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>
</head>
<body>
 
    <!--Main-->
        <div id="main-page" data-role="page">
 
            <!--Header-->
            <div data-role="header" data-position="fixed">
                <h1>Next Ferry</h1>
            </div>
 
            <!--Content-->
            <div id="mainlist" data-role="main" role="main" class="ui-content">
                <div id="wrapper">
                    <div>
                        <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>
                        <p>
                            Down by the river, I <b>shot</b> my baby!
                        </p>
                        <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>
                        <p>Ramblin Rose, you're a store-bought woman.</p>
                    </div>
                </div>
            </div>
        </div>
</body>
</html>

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.

Regards,
Kaloyan
Telerik
 

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

 
Tags
AppBuilder in-browser client
Asked by
Denise
Top achievements
Rank 1
Answers by
Kaloyan
Telerik team
Share this question
or