Cannot get scrolling to work on content

ionic-v1
1

I am developing for Android, using ripple for testing. I included ionic.css, ionic.min.js, ionic-angular.min.js and phonegap.js all in the head tag.
Here’s my code:

<body>
    <div class="bar bar-header bar-positive">
        <h1 class="title">this is a test</h1>
    </div>
    <content has-header="true" scroll="true" class="content has-header cards-bg">
        <div class="card">
            <div class="item item-text-wrap">hello: 123456</div>
        </div>
        <div class="card">
            <div class="item item-text-wrap">hello: 123456</div>
        </div>
        <div class="card">
            <div class="item item-text-wrap">hello: 123456</div>
        </div>
    </content>
</body>
2

Hi @shortnamed, could you try using all the angularJS plus ionic-angular js files instead of ionic-angular.min.js?
Thanks :slight_smile:

3

Hi, thanks for helping!
Unfortunately, the scrolling doesn’t still work.
Here is the list of all the included javascript files, all in the head tag and in this exact same order:

angular.js
ionic.js
phonegap.js
index.js
ionic-angular.js
angular-animate.js
angular-cookies.js
angular-loader.js
angular-mocks.js
angular-resource.js
angular-route.js
angular-sanitize.js
angular-scenario.js
angular-touch.js

4

Hi, ionic-angular.js should be under the angularjs scripts (it has some dipendences with angular-route, resource and others). Try to move it, then, if it won’t work too, please post here any error you can find in the console log.
Thanks

5

After moving the ionic-angular.js below all the scripts there are no errors in the console, but it still won’t work (tested on my android device and Chrome 31.0.1650.63 on Ubuntu 13.04 with touch emulation enabled)
I’ll just paste my entire document here:

 <!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="www/css/index.css" />
        <link rel="stylesheet" type="text/css" href="www/css/ionic.css"/>
        <script type="text/javascript" src="www/js/angular.js"></script>
        <script type="text/javascript" src="www/js/ionic.js"></script>
        <script type="text/javascript" src="www/phonegap.js"></script>
        <script type="text/javascript" src="www/js/index.js"></script>
        <script type="text/javascript" src="www/js/angular-animate.js"></script>
        <script type="text/javascript" src="www/js/angular-cookies.js"></script>
        <script type="text/javascript" src="www/js/angular-loader.js"></script>
        <script type="text/javascript" src="www/js/angular-mocks.js"></script>
        <script type="text/javascript" src="www/js/angular-resource.js"></script>
        <script type="text/javascript" src="www/js/angular-route.js"></script>
        <script type="text/javascript" src="www/js/angular-sanitize.js"></script>
        <script type="text/javascript" src="www/js/angular-scenario.js"></script>
        <script type="text/javascript" src="www/js/angular-touch.js"></script>
        <script type="text/javascript" src="www/js/ionic-angular.js"></script>
        <title>location</title>
    </head>
    <body>
        <div class="bar bar-header bar-positive">
            <h1 class="title">this is a test</h1>
        </div>
        <content has-header="true" scroll="true" class="content has-header cards-bg">
            <div class="card">
                <div class="item item-text-wrap">hello: 123456</div>
            </div>
            <div class="card">
                <div class="item item-text-wrap">hello: 123456</div>
            </div>
            <div class="card">
                <div class="item item-text-wrap">hello: 123456</div>
            </div>
            <div class="card">
                <div class="item item-text-wrap">hello: 123456</div>
            </div>
            <div class="card">
                <div class="item item-text-wrap">hello: 123456</div>
            </div>
            <div class="card">
                <div class="item item-text-wrap">hello: 123456</div>
            </div>
            <div class="card">
                <div class="item item-text-wrap">hello: 123456</div>
            </div>
            <div class="card">
                <div class="item item-text-wrap">hello: 123456</div>
            </div>
            <div class="card">
                <div class="item item-text-wrap">hello: 123456</div>
            </div>
            <div class="card">
                <div class="item item-text-wrap">hello: 123456</div>
            </div>
        </content>
    </body>
</html>
6

Did you tried something like <div class="scroll-content has-header overflow-scroll">your_content</div> ?