CODEWITHSUNDEEP
ionic-frameworkvertical-scrolling
Kesupile K
Kesupile K

Reputation: 161

<ionic-content> / <ion-nav-view> not scrolling

I'm making a simple app that keeps track of my hours at work. I'm developing the app for android and I'm having a problem with the scrolling.

Structure of the App: I have a header bar and a footer which are both outside of the < ion-content > tab, so I don't expect that to be scrollable. Within the < ion-content > I have used an < ion-side-menus > tab and finally within the < ion-side-menu-content > tab I have put in a < ion-nav-view > tab which is controlled by my state provider.

Everything works fine, the menu is operational and the views change according to their design. Within one of my views I have a list that exceeds the size HERE IS WHERE THE PROBLEM BEGINS!. When using a computer, I can pull the page down (as if I were trying to refresh it) but when I try to scroll down the page goes straight to the top of the list unless I keep dragging and have my finger on the left click. Furthermore the rest of the content in the list is not loaded. The listed is literally cropped to where it stopped before I dragged down. When I export it to an android app I cant even drag to scroll. The scrolling is literally non-functional.

I've attached some code 

var app = angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: "views/home.html",
        controller: "MainController"
      })
      .state('rotas', {
        url: '/rotas',
        templateUrl: "views/rotas.html",
        controller: "MainController"
      })
      .state('update', {
        url: '/update',
        templateUrl: "views/update.html",
        controller: "UpdateController"
      });
    $urlRouterProvider.otherwise('/');
  });
.scroll {
  height: 100%;
}
/* Before i put in this CSS element, the content in the view was cropped SIGNIFICANTLY. not sure exactly what it does but it solved my problem. All other CSS elements are colour changes*/
index.html

<html>

<head>...</head>

<body ng-app="starter" ng-controller="MainController">

  <ion-pane>
    <ion-header-bar class="bar-stable">
      <!--header bar -->
      <h1 class="title">Shiftwiz.{{controllerCheck}}</h1>
    </ion-header-bar>
    <div class="bar bar-footer bar-stable">
      <!--footer-->
      <table id="footer-table">
        <tr>
          <td>
            <a ui-sref="rotas" ng-click="activity.doRotas()">
              <div>Rotas</div>
            </a>
          </td>
          <td>
            <a ui-sref="update" ng-click="activity.doUpdate()">
              <div>Update</div>
            </a>
          </td>
        </tr>
      </table>
    </div>
    <ion-content>
      <ion-side-menus>
        <ion-side-menu-content overflow-scroll="true">
          <!--menu-->
          <button class="button button-full button-positive" ng-click="toggleLeft()">
            Rotas: {{activity.rotas}} Update: {{activity.update}}
          </button>
          <ion-nav-view overflow-scroll="true"></ion-nav-view>
        </ion-side-menu-content>
        <ion-side-menu side="left">
          <ion-item>Next Week</ion-item>
          <ion-item ng-click="toggleLeft(); activity.chooseThisWeek(); calcDates()">This Week</ion-item>
          <div id="further-weeks" ng-show="activity.rotas">
            <ion-item>Last Week</ion-item>
            <ion-item>Last Two</ion-item>
            <ion-item>Last Three</ion-item>
          </div>
        </ion-side-menu>
      </ion-side-menus>

    </ion-content>
  </ion-pane>
</body>

</html>


update.html
<!-- this view contains the list which isn't rendering-->

<div class="card" ng-repeat="day in unPublishedRota">
  <a ng-click="day.toggleState()">
    <div class="item item-divider">
      <p class="day">{{ day.date | date:"EEEE" }}
        <br />{{day.date | date:"d, MMM y"}}</p>
      <p class="times">{{day.start}} | {{day.finish}}
        <br />{{day.hours}} hrs</p>
    </div>
  </a>

Upvotes: 3

Views: 5364

Answers (1)

drys
drys

Reputation: 735

Your update.html contents should be wrapped in <ion-view> and <ion-content> elements.

<ion-view>
  <ion-content>    
    <div class="card" ng-repeat="day in unPublishedRota">
      <a ng-click="day.toggleState()">
        <div class="item item-divider">
          <p class="day">{{ day.date | date:"EEEE" }}
            <br />{{day.date | date:"d, MMM y"}}</p>
          <p class="times">{{day.start}} | {{day.finish}}
            <br />{{day.hours}} hrs</p>
        </div>
      </a>
    </div>
  </ion-content>
</ion-view>

You can also have a look at a working sidemenu example by Ionic.

Upvotes: 3

Related Questions