Ionic scrolling stops working after some use

I am developing an ionic application. Now I have an ionic scrolling issue that doesn't work after a while. when launching an app on the device, scrolling works as it should. But after scrolling sometimes stops working in other forms of my application. This does not freeze the application because I can still enter input into fields in my form, even though the scroll is not working. The problem is that I cannot view the fields at the bottom because the scroll is not working. Does anyone have a solution for this?

I will write html form here. All other forms are performed as follows

<ion-view title="rrrr">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>

    <ion-content class="has-header" scroll="true" padding="true">


            <!-- pass in the variable if our form is valid or invalid -->
            <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>

                <div class="form-group" ng-class="{ 'has-error' :$invalid && !$pristine }">
                    <label><h4><b>Beneficiary Name*</b></h4></label>
                    <input type="text" name="name" class="item-input-wrapper" ng-model="" ng-maxlength="50"  required>
                        <p ng-show="$invalid && !$pristine " class="help-block"><font color="red">You name is required.</font></p>


                <div class="form-group" ng-class="{ 'has-error' : userForm.accNo.$invalid && !userForm.accNo.$pristine }">
                    <label><h4><b>Beneficiary Account Number*</b></h4></label>
                    <input type="number" name="accNo" class="item-input-wrapper" ng-model="user.accNo"  ng-maxlength="10"   required>
                        <p ng-show="$invalid && !$pristine " class="help-block"><font color="red">Account number is required</font></p>
                        <p ng-show="userForm.accNo.$error.maxlength" class="help-block"><font color="red">Account number cannot exceed 10 digits.</font></p>

                <div class="form-group">
                    <label><h4><b>Bank Name*</b></h4></label>
                    <select style="margin: auto; width:100%; height=35px;" id="" ng-model="" ng-options=" for bank in banks" >
                        <option id="default" value="" selected="selected">--Select Bank--</option>



                <label><h4><b>Bank Code*</b></h4></label>
                <input type="text" name="bcode" class="item-input-wrapper" ng-model="user.bankCode"  required>

                    <div class="form-group" ng-class="{ 'has-error' : userForm.brname.$invalid && !userForm.brname.$pristine }">

                        <label><h4><b>Branch Name*</b></h4></label>
                        <input type="text" name="brname" class="item-input-wrapper" ng-model="user.bankBranch"  required>
                            <p ng-show="userForm.brname.$invalid && !userForm.brname.$pristine " class="help-block"><font color="red">Branch Name is required</font></p>

                    <div class="col"style="text-align: center">
                        <button align="left"class="button button-block button-reset"style="display: inline-block;width:100px;text-align:center "

                        <button class="button button-block button-positive"  style="display: inline-block;width:100px "



angularjs for this

$ = {
    origin: { account : ''},
    beneAcc: '',
    narration: '',
    beneName: '',
    beneBank: {account : ''},
    transtype: '',
    beneBranch: '',
    password: '',
    amount: ''

$scope.orig = angular.copy($;
$scope.accountsArr = [];

    var accountObject  = $rootScope.rootScopeUserAccounts[k];
    $scope.accountsArr.push({ account: accountObject.userAccountNumber });

$scope.listOne = [{"id":"1","name":"Internal"},{"id":"2","name":"SLIPS"},{"id":"3","name":"CEFT"}]
$scope.listTwo = [{"id":"1","name":"Seylan Bank"},{"id":"2","name":"Sampath Bank"},{"id":"3","name":"BOC"}]
$scope.listThree = [{"id":"1","name":"Colombo 01"},{"id":"2","name":"Colombo 02"},{"id":"3","name":"Colombo 03"}]

// $ = $scope.listOne[0].name;

$scope.hideFields = function() {
    if($ == "Internal") {
        $scope.disableFields = true;
        $scope.typeFlag= false;
        $scope.disableFields = false;
        $scope.typeFlag= true;

$ = [
    { bank : 'Sampath Bank'},
    {bank : 'BOC'},

$scope.thirdPartySubmit = function(selectData) {
    console.log("came here!");

    //add decimals to whole numbers.
    if(selectData.amount % 1 == 0){
        var transferAmount = parseFloat(selectData.amount).toFixed(2);

    //create json dictionary.
    var data = {
        "transferedAmount" : selectData.amount,
        "beneficiaryAccountNumber" : selectData.beneAcc,
        "beneficiaryType" : "THIRD_PARTY",
        "beneficiaryBankName" :,
        "beneficiaryName" : selectData.beneName,
        "branchName" :,
        "userAccountNumber" : selectData.origin.account,
        "narration" : selectData.narration,
        "userName" : "retail123",
        "thirdPartyFundTransferType" :
     $scope.jsonData = JSON.stringify(data);


     //POST data
         method: 'POST',
         url: ApplicationSettings.http_server + 'account service/fund-transfer/save',
                                     data: $scope.jsonData
     .success(function(data, status, headers, config) {
         window.alert("Transaction success!");
         $ = angular.copy($scope.orig);
     .error(function(data,status, headers, config) {
         // execute this code on error
         $ = angular.copy($scope.orig);
         console.error('ERR', err);
//end of function

$scope.reset = function () {
    $ = angular.copy($scope.orig);



source to share

1 answer

What is your version with ionic card?

I had the same problem on a Samsung S3 with ionic version 1.0.0-beta9.

As per this issue:

version greater than 1.0.0-beta12 should work fine when scrolling.



All Articles