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

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.

Answer 2

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