Menu
This might be a stupid a question, but this really makes headache.
I couldn't make the content scrollable, I didn't add anyhting, I just can't scroll for no reason.
I just a started a new page and i'm filling a list dynamically, but the problem i'm facing is that I can't scroll
Here is my full code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- 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 -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-content>
<div ng-controller="customersCtrl">
<div class="list">
<div ng-repeat="m in matches" >
<div class="item item-divider" >
{{ m.competition }}
</div>
<a class="item" href="#" ng-repeat="s in matches" ng-if="m.competition == s.competition">
{{ s.team1.name+' - '+s.team2.name }}
</a>
</div>
</div>
</div>
</ion-content>
<script>
var app = angular.module('starter', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://int.footballclub.orange.com/ofc/matches?date=2015-05-20")
.success(function (response) {
$scope.matches = response;
for (var i = 0; i < response.length; i++) {
setName($scope.matches, i);
}
var Competitions = ["Kenya","Nigéria"];
});
var setName = function (matches, index) {
$http.get("http://int.footballclub.orange.com/ofc/competitions/" + matches[index].idCompetition)
.success(function (response) {
matches[index].competition = response.name;
});
}
});
</script>
</body>
</html>
508
If you are adding content dynamically in <ion-content><ion-content/>
You need to call resize() on $ionicScrollDelegate after the content is added
When you use resize() it again recalculate the size of content i.e. will make your <ion-content><ion-content/> scrollable.
HTML:
<body ng-controller="MainCtrl">
<ion-content delegate-handle="mainScroll">
</ion-content>
</body>
JavaScript:
var app = angular.module('starter', []);
app.controller('customersCtrl', function($scope, $http,$ionicScrollDelegate) {
$scope.reCalculateSize= function() {
$ionicScrollDelegate.$getByHandle('mainScroll').resize();
};
});
Just call reCalculateSize() after adding content dynamically.
192
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
