Hi, I’m new to apps and Ionic - I’m having a problem with scrolling on a phone. I have searched here for previous topics but did not find a solution.
My app basically has a home screen with a grid of 3 x 3 icons which lead to just 50 <LI>s of text. These inside screens have a home button and a hamgurger menu. Test results are:
<ion-content overflow-scroll="true">
Android 2.3.6 - No scrolling
Android 4.2.2 - Seem fine
<ion-content overflow-scroll="false">
Android 2.3.6 - Initally scrolls but quickly stops after a lttle navigation around app
Android 4.2.2 - Ditto
In summary overflow-scroll=“false” not relable on either device, overflow-scroll=“true” fine on 4.2 but no use on 2.3
Also, perhaps related, on 4.2 closing the menu by dragging the main screen is a bit “jerky” but OK if you tap the icon.
Using v1.0.0-beta.9 of Ionis and using cordova build android with version 3.5
I’m sure I’ve made major errors in my first code, please feel free to point them out. Thanks in advance!
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ionic Grid</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script src="cordova.js"></script>
</head>
<body ng-app="myApp" ng-controller="bodyCtrl">
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script id="grid.html" type="text/ng-template">
<ion-header-bar class="bar-light">
<h1 class="title">App name</h1>
</ion-header-bar>
<ion-content>
<div class="row">
<div class="col">
<a href="#grid/content_a"><img src="img/content_a.png"></a>
</div>
<div class="col">
<a href="#grid/content_b"><img src="img/content_b.png"></a>
</div>
<div class="col">
<a href="#grid/content_c"><img src="img/content_c.png"></a>
</div>
</div>
<div class="row">
<div class="col">
<a href="#grid/content_d"><img src="img/content_d.png"></a>
</div>
<div class="col">
<a href="#grid/content_e"><img src="img/content_e.png"></a>
</div>
<div class="col">
<a href="#grid/content_f"><img src="img/content_f.png"></a>
</div>
</div>
<div class="row">
<div class="col">
<a href="#grid/content_g"><img src="img/content_g.png"></a>
</div>
<div class="col">
<a href="#grid/content_g"><img src="img/content_h.png"></a>
</div>
<div class="col">
<a href="#grid/content_i"><img src="img/content_i.png"></a>
</div>
</div>
</ion-content>
</script>
<script id="inside.html" type="text/ng-template">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-light">
<!-- menu show/hide -->
<button class="button button-icon" ng-click="toggleMenu()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">App name</h1>
<!-- home button -->
<a class="button button-icon" href="#">
<i class="icon ion-home"></i>
</a>
</ion-header-bar>
<ion-content overflow-scroll="true" >
<div class="SS_inside_contnt">
<h1>true {{title}}</h1>
<ol>
<li>In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li>
<!-- above line repeated 50 times (hard coded) -->
</ol>
</div>
</ion-content>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-light">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<a class="item" href="#grid/content_a">content_a</a>
<a class="item" href="#grid/content_b">content_b</a>
<a class="item" href="#grid/content_c">content_c</a>
<a class="item" href="#grid/content_d">content_d</a>
<a class="item" href="#grid/content_e">content_e</ion-item>
<a class="item" href="#grid/content_f">content_f</a>
<a class="item" href="#grid/content_g">content_g</a>
<a class="item" href="#grid/content_h">content_h</a>
<a class="item" href="#grid/content_i">content_i</a>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
</body>
</html>
app.js
var myApp = angular.module('myApp', ['ionic']);
myApp.controller('bodyCtrl', function($scope, $ionicSideMenuDelegate) {
$scope.toggleMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
});
myApp.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '',
templateUrl: 'grid.html'
})
.state('grid', {
url: '/grid/:page',
templateUrl: 'inside.html',
controller: function ($scope, $stateParams) {
$scope.title =$stateParams.page;
}
});
});
custom CSS
.col {text-align: center;}
ion-header-bar img {margin-top: 8px;
height: 27px;}
.SS_inside_contnt { width:94%;
margin : 0 auto;}
ol {
display: block;
list-style-type: decimal;
}