Content not scrollable in ionic

Vinz243 picture Vinz243 · Jun 16, 2014 · Viewed 9.9k times · Source

I am using ionic framework to make a simple application( you can search through itunes for tracks). However, when displaying a lot of results, the ion content isn't scrollable. Here is my markup:

<!DOCTYPE html>
<html ng-app="hiphop">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic-AngularJS-Cordova</title>

    <!-- Ionic framework - replace the CDN links with local files and build -->
    <link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
    <script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/app.js"></script>

    <script src="cordova.js"></script>


</head>

<body ng-controller="SearchCtrl" ng-app="hiphop">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <label class="item-input-wrapper header">
                <i class="icon ion-android-search placeholder-icon"></i>
                <input type="search" placeholder="Search" ng-model="search.query" ng-enter="search()" />

            </label>
        </ion-header-bar>
        <ion-content class="has-header" animation="slide-left-right" padding="true" scroll="true" has-bouncing="true">
            <!-- our list and list items -->
            <div class="list">
                <a class="item item-avatar" href="#" ng-repeat="item in items">
                    <img src="{{ item.artworkUrl60 }}">
                    <h2>{{item.trackName}}</h2>
                    <p>{{item.artistName}}
                    </p>
                </a>
            </div>
        </ion-content>
    </ion-pane>
</body>

</html>

Codepen demo (with also js).

Why isn't it possible to scroll? How to do it?

PS: I am using Intel XDK

Answer

krisrak picture krisrak · Jun 17, 2014

You had included ionic.bundle script 2 times, I removed one in your code-pen example and scrolling worked.

http://codepen.io/anon/pen/ynCsc