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" >
{{ mpetition }}
</div>
<a class="item" href="#" ng-repeat="s in matches" ng-if="mpetition == spetition">
{{ 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("")
.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("/" + matches[index].idCompetition)
.success(function (response) {
matches[index]petition = response.name;
});
}
});
</script>
</body>
</html>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>4 Answers
Reset to default 8If 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.
Ionic made a Directive to make a content scrollable Try this to your following code :
<ion-scroll direction="xy" >
// Your content scrollable
</ion-scroll>
In your case you have to do:
<ion-content>
<div ng-controller="customersCtrl">
<ion-scroll direction="xy" >
<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>
</ion-scroll>
</div>
</ion-content>
So ion-scroll directive has a little problem when we need to vertical and horizontal scroll. The only solution that i found is to make the content smaller than the page height. Look at the codePen : Working CodePen
ref: Ion-scroll doc
I solved this problem in this way, I think it will help you.
In html file:
<ion-content padding>
<div scrollY="true" id="scroll-list">
<ion-list *ngFor="let item of list">
<ion-item>
{{ item }}
</ion-item>
</ion-list>
</div>
</ion-content>
In scss file:
#scroll-list{
height: 200px;
}
happy coding...
ionic sets these css styles, that's the reason scrolling is disabled:
body,html{overflow:hidden}