Ionic ng-hide/ng-show scroll issue

Question

I'm currently building an Ionic app for someone but I'm having some issues with ng-hide and ng-scroll. The page shows a product and you can switch between seeing the nutrients or the ingredients. I use ng-hide & ng-show to achieve this. However, when I press the button to switch data, the scrollbar messes up. I attached a short video to demonstrate the issue: https://youtu.be/W9fFMdSLW8s

Here are some code snippets that may be useful to gain insight.

Codepen

EDIT: I made a codepen that reproduces the issue:

http://codepen.io/JeremyKeusters/pen/qmBwzp

Steps to reproduce:

1. Please make sure that the browser height and the preview window is not too big.
2. Click on the green 'show nutrients' button and try to scroll down immediately . (use mouse & drag to scroll as if you were using a phone)
3. You will notice that you're blocked and can't scroll down. The solution is to wait a couple of seconds until the scroll 'resets'.
4. Try to click the green button on the bottom again. You'll see that there's a lot of white space in which you can scroll (the scroll area is too big). The solution is again to wait a couple of seconds until it resets.

Code

template page:

  <table class="ingredients" ng-show="toggle">
    <tr>
      <th class="left">Ingredient</th>
      <th class="right">Amount per<br>100 ml</th>
    </tr>
    <tr ng-repeat="ingredient in JuiceIngredients">
      <td class="left">{{ingredient.Ingredient.Name}}</td>
      <td class="right">{{ingredient.Ingredient.Amount_g}} g</td>
    </tr>
  </table>
  <table class="nutrients" ng-hide="toggle">
    <tr>
      <th class="left">Nutrient</th>
      <th class="right">Amount per 100 ml</th>
      <th class="right">% of reference quantity</th>
    </tr>
    <tr ng-repeat="nutrient in JuiceNutrients">
      <td class="left">{{nutrient.Nutrient.Name}}</td>
      <td class="right" ng-bind-html="nutrient.Nutrient.Amount_html"></td>
      <td class="right">{{(nutrient.Nutrient.PartOfRI * 100 | number:0)}} %</td>
    </tr>
  </table>
  <br>
  <button ng-click="toggle=!toggle;" class="button button-block button-balanced default-button">
    <span ng-hide="toggle">Show ingredients</span>
    <span ng-show="toggle">Show nutrients</span>
  </button>

controller.js:

  bottleSrv.getBottleDetails($rootScope.scannedCode).then(function (data) {
    $scope.JuiceID = data.JuiceID;
    $scope.ExpirationDate = data.ExpirationDate;
    $scope.JuiceImg = "https://someurl.com/task.php?token=" + $rootScope.userToken + "&juice_id=" + data.JuiceID + "";

    juiceSrv.getJuiceDetails($scope.JuiceID).then(function (data) {
      $scope.JuiceName = data.Name;
      $scope.JuiceDescription = data.Description;
    })

    juiceSrv.getJuiceIngredients($scope.JuiceID).then(function (data) {
      $scope.JuiceIngredients = data;
    })

    juiceSrv.getJuiceNutrients($scope.JuiceID).then(function (data) {
      $scope.JuiceNutrients = data;
    })
  });

Does someone has a solution for this problem? Thanks in advance for helping out!

-Jérémy

Answer 1

We you click button call one function in controller and resize height of document using $ionicScrollDelegate.resize();

html

<button ng-hide="toggle" ng-click="toggleButton()" class="button button-block button-balanced default-button">
Show ingredients
</button>

<button ng-show="toggle" ng-click="toggleButton()" class="button button-block button-balanced default-button">
Show nutrients
</button>

js

$scope.toggle = false;
$scope.toggleButton = function() 
{
  $scope.toggle = !$scope.toggle;
  $ionicScrollDelegate.resize();
};

Note

Add dependency in controller called $ionicScrollDelegate

Answer 2

I finally found an answer for this issue. I added the overflow-scroll element to the ion-content element.

<ion-content overflow-scroll="true">

This resolved the issue. It does messes up a bit with the bottom spacing, but you can fix that with some CSS.