[SOLVED] Scroll Delay when expanding content


#1

In the following snippet, i have a list of cities with a button that when its clicked it displays a list of areas in that city.

Doing so the content expands past the current height of ion-content but you cannon scroll down for a few seconds. Scrolling up is no problem. I suspect that this is caused because ion-content needs some time in order to refresh its height making the app seem unresponsive.

Does anyone know how I can eliminate this delay or how I could cause the content refresh on demand?

<ion-view title="Select Area">

  <ion-content>

	<!-- CITY LIST -->
      <div ng-repeat="city in cities | orderBy : 'weight'" item="city" ng-class="rotate">
        
        <div class="city">
            
            <table>
                <tr>
                    <td width="100%">
                        {{city.name}}
                    </td>
                    <td width="50px">
                        <button ng-click="showDetails = !showDetails" class='button button-light' style="display:block; min-width: 50px; height:100%; background-color:#f9f9f9; border: none; font-size: 14px; color: #666;"><i class="ion-chevron-down"></i> </button>
                    </td>
               </tr>
            </table>
            
        </div>

        <div class="areas" ng-show="showDetails">
            
            <!-- AREA LIST -->
            <ion-list>
                  <ion-item bindonce ng-repeat="area in areas | filter: area.city_key = city.city_key | filter:search" item="area" href="#/directory/{{city.city_key}}/{{area.area_key}}">
                    <i class="ion-ios7-location gray"></i>&nbsp;&nbsp;{{area.name}}
                    <i style="font-size:14px; color: #e2e2e2" class="icon ion-chevron-right"></i>
                  </ion-item>
            </ion-list>
            
        </div>
        
      </div>
  </ion-content>

#2

Hi we have exactly the same problem with our app. If you “tab” through the fields of a form and begin typing you will miss the first few letters because the viewport needs to be recalculated by ion-content…


#3

@gunborg, I just solved this problem, the trick is to call $ionicScrollDelegate.resize(); the moment the content changes so it eliminates the refresh delay.