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

Question

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

usually it should change automatically can you share some code? maybe a jsfiddle — George
sorry its actualy ion-content height. On removing the div, there are lot of blank space below the actual content — diana

George George · Accepted Answer · 2018-01-22T13:01:25

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

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

1 Answers