简体   繁体   中英

how to set ion-content height on adding or removing a div in ionic V1 App?

how to set ion-content height on adding or removing a div in ionic V1 App?

Actually in my project I have an Accordian, where its content(accordian content) will be added or remove by using ng-if. When I scroll the content to bottom and hide the accordian content,ion-content height is not correct.

Please find the jsfiidle in comment.

Click on accordian 2 and scroll to bottom, and the click accordian 3

when clicking the third group, the second one is hidden but <ion-content> do not know that so it keeps the scrolling position as it is. this is where $ionicScrollDelegate comes in.

add $ionicScrollDelegate to your controller then after you close and open the divs call its resize methode

angular.module('ionicApp', ['ionic'])

.controller('HomeCtrl', function($scope, $ionicModal, $ionicScrollDelegate) {
  $scope.data = {
    showGroup: null
  };
  $scope.isGroupShown = function(index) {
    return $scope.data.showGroup == index;
  };
  $scope.toggle = function(index) {
    if ($scope.isGroupShown(index)) {
      $scope.data.showGroup = null;
    } else {
      $scope.data.showGroup = index;
    }
    $ionicScrollDelegate.resize();
  };
})

$ionicScrollDelegate.resize(); will tell ion content to resize the scroll area to fit the elements inside it.

hope it helps

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM