[SEMI-SOLVED] Ng-hide/ng-show scroll issue

ionic-v1
1

Hello everyone,

I’m currently building an 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.

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

2

I actually uploaded some code to Plunkr to reproduce…

Codepen

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

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.

4

Sorry for bumping this up, but the overflow-scroll causes the page to have no spacing on the bottom. What’s a solution to this? I already tried a lot of things but a margin/padding doesn’t seem to help…

5

I had the same issue and this solution saved my life.