Ionic scroll - anything changed in the new version? page does not scroll

ionic-v1
1

Hello, I just updated to the latest version of ionic
Has scrolling of pages changed in the new build?

I have a screen where I am creating a montage of images --> that page used to scroll when the images got large. It’s not scrolling anymore

My code that worked perfectly before: (it does not scroll on desktop - safari nor iOS – they both scrolled before)

<ion-view title="Montage View" class="bar-stable" cache-view="false" hide-nav-bar="{{minimal}}">
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
    </ion-nav-buttons>

    <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()"></button>
    </ion-nav-buttons>

    <ion-content padding="true">

        <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>
        <span ng-if="!minimal">
        <div class=" range range-positive">
            <i class="icon ion-arrow-shrink"></i>

            <input type="range" ng-model="slider.monsize" min="1" max="6">
            <i class="icon ion-arrow-expand"></i>

        </div>
        </span>
        <span ng-repeat="monitor in monitors| limitTo: monLimit">
        
              <img ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable)" on-hold="onHold($index)" />
           
        </span>

        <div ng-show="minimal">
            <br/>
            <button class="button button-outline button-positive" ng-click="switchMinimal()">
                exit full screen view
            </button>

        </div>
    </ion-content>
</ion-view>
2

I am using 1.5.1 of ionic.
There is definitely something going on with scrolling. I was on 1.3 or 1.4 before this and never faced a problem.

to get this page to scroll, I had to do

 <ion-content scroll="true" overflow-scroll="true">

and when I run it on iOS its erratic.

3

I’m still not close to figuring out what is going on. Anyone?

ionic info

Your system information:

Cordova CLI: 5.1.1
Ionic Version: 1.0.0-rc.4
Ionic CLI Version: 1.5.4
Ionic App Lib Version: 0.2.1
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X Yosemite
Node Version: v0.12.4
Xcode version: Xcode 6.3.2 Build version 6D2105

Bower list for my project

bower list
bower check-new     Checking for new versions of the project dependencies..

├─┬ angular-circular-navigation#0.2.1 extraneous
│ └── angular#1.3.13 (1.3.17-build.124+sha.61a3fb6 available, latest is 1.4.2-build.4067+sha.ed27e0e)
├── font-awesome#4.3.0 extraneous
├─┬ ionic#1.0.0-rc.4 (latest is 1.0.0)
│ ├── angular#1.3.13 (latest is 1.4.2-build.4067+sha.ed27e0e)
│ ├─┬ angular-animate#1.3.13 (latest is 1.4.2-build.4067+sha.ed27e0e)
│ │ └── angular#1.3.13
│ ├─┬ angular-sanitize#1.3.13 (latest is 1.4.2-build.4067+sha.ed27e0e)
│ │ └── angular#1.3.13
│ └─┬ angular-ui-router#0.2.13 (latest is 0.2.15)
│   └── angular#1.3.13 (1.4.2-build.4067+sha.ed27e0e available)
├── moment#2.10.2 extraneous (2.10.3 available)
├─┬ ng-mfb#0.4.0 (0.4.2 available, latest is 0.6.1)
│ └── angular#1.3.13 (1.3.17-build.124+sha.61a3fb6 available, latest is 1.4.2-build.4067+sha.ed27e0e)
├─┬ ngCordova#0.1.15-alpha extraneous (0.1.17-alpha available)
│ └── angular#1.3.13 (1.4.2-build.4067+sha.ed27e0e available)
└─┬ tc-angular-chartjs#1.0.9 extraneous (1.0.11 available)
  ├── Chart.js#1.0.2 (latest is 2.0.0-alpha3)
  └── angular#1.3.13 (1.4.2-build.4067+sha.ed27e0e available)

My project github https://github.com/pliablepixels/zmNinja
The problem HTML: https://github.com/pliablepixels/zmNinja/blob/master/www/templates/montage.html

And finally, my index.html script loads – I don’t see double loading of angular etc.

head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
     <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' https://www.google.com 'unsafe-inline' 'unsafe-eval'">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="lib/ng-mfb/mfb/src/mfb.css" rel="stylesheet">

  <link rel="stylesheet" href="lib/angular-circular-navigation/angular-circular-navigation.css">
   <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">




    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->

    <!-- we need the full JQuery for the global img src
    error interceptor in app.js -->

     <script src="lib/ionic/js/ionic.bundle.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>


    <!-- your app's js -->

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

    <script src="js/DataModel.js"></script>
    <script src="js/LoginCtrl.js"></script>

    <script src="js/MontageCtrl.js"></script>
    <script src="js/EventCtrl.js"></script>
    <script src="js/EventsGraphsCtrl.js"></script>
    <script src="js/MonitorCtrl.js"></script>
    <script src="js/HelpCtrl.js"></script>
    <script src="js/StateCtrl.js"></script>
      <script src="js/DevOptionsCtrl.js"></script>


<script src="lib/angular-circular-navigation/angular-circular-navigation.js"></script>

    <script src="lib/Chart.js/Chart.js"></script>
    <script src="lib/tc-angular-chartjs/dist/tc-angular-chartjs.min.js"></script>
    <script src="lib/ng-mfb/src/mfb-directive.js"></script>
    <script src="lib/moment/moment.js"></script>


</head>
4

So a few things here. The version number you’ve given is the version of the cli, not the ionic framekwork
Looks like you’re using rc4.

Just cloned the repo and tried to check it out and I don’t have the credentials to login and investigate.
There weren’t any big changes to scrolling around that time, but

<ion-content scroll="true" overflow-scroll="true">

would cause issues.

<ion-content>

should be used instead

If you could provide some credentials, I could investigate further

5

@mhartington, correct, I was using ion-content before but now it does not scroll down if I just use ion-content

When you refer to credentials, you mean the login credentials for the app? I’d be happy to send it to you. Is there a way to private message it? It contains live video feed, so don’t want to post that publicly

6

Just sent you credentials via PM

7

@mhartington thank you for helping me debug! The problem was with my code (not quite sure why), but removing the errant code solved the problem. You rock!

1 Like
8

Can you send me directions of HOW TO SOLVE THIS PROBLEM.
Because right now im getting same issue in here

1 Like