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-nav-buttons>

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

        <ion-list>

            <!-- 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' : userForm.name.$invalid && !userForm.name.$pristine }">
                    <label><h4><b>Beneficiary Name*</b></h4></label>
                    <input type="text" name="name" class="item-input-wrapper" ng-model="user.name" ng-maxlength="50"  required>
                        <p ng-show="userForm.name.$invalid && !userForm.name.$pristine " class="help-block"><font color="red">You name is required.</font></p>

                        </div>

                <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="userForm.name.$invalid && !userForm.name.$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>

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

                    </select>

                </div>


                <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>


                    <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 "
                            type="reset"
                            ng-click="reset()"padding-top="true">Reset</button>


                        <button class="button button-block button-positive"  style="display: inline-block;width:100px "
                            ng-click="submit(user)"padding-top="true">Submit</button>
                    </div>



                    </form>
        </ion-list>
    </ion-content>
</ion-view>

      

angularjs for this

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

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

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

//gaveen
$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.data.transtype = $scope.listOne[0].name;

$scope.hideFields = function() {
    if($scope.data.transtype.name == "Internal") {
        $scope.disableFields = true;
        $scope.typeFlag= false;
    }
    else{
        $scope.disableFields = false;
        $scope.typeFlag= true;
    }
};

$scope.bank = [
    { bank : 'Sampath Bank'},
    {bank : 'BOC'},
];

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

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

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

     window.alert($scope.jsonData);

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

$scope.reset = function () {
    $scope.data = angular.copy($scope.orig);
    $scope.thirdPartyForm.$setPristine();
};
}])

      

+3


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: https://github.com/driftyco/ionic/issues/1433

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

+2


source







All Articles