List inside slidebox doesn't repand all the way to the right

ionic-v1
1

Try to show a list inside a slide-box, there is the html template.

<ion-view view-title="">
  <ion-content>
    <ion-slide-box on-slide-changed="slideHasChanged($index)">
      <ion-slide ng-repeat="result in resultArr">
        <ion-list>
          <ion-item ng-repeat="content in result.searchResult">
            {{content}}
          </ion-item>
        </ion-list>
      </ion-slide>
    </ion-slide-box>
  </ion-content>
</ion-view>

$scope.resultsArr is an array, each entry will be shown in a slide. Within the slide, we show a list of content that comes form resultArr[i].searchResult, which is another array.
Here is the angularjs code:

    .controller("searchCtr", function ($scope) {
      //list of $scope variables
      $scope.resultArrPromise=null;
      $scope.resultArr=null;
      $scope.headTag=null;

 
      $scope.slideHasChanged=function($index){
        console.log($index);
        $scope.resultArrP.then(function(resultArr){
          $scope.resultArr=resultArr;       
      };

      $scope.resultArrPromise=search("some terms to search");
      $scope.slideHasChanged(0);
      })

Function search gets resultArr from a remote server and wrap it as a promise.

My problem is that the list inside the slidebox does not expand all the way to right of the screen, see the attached screenshot. If I remove the outer slidebox and just show a
list of resultArr[0], the list expands. It must be the problem of outer slidebox then but I
can’t figure out how fix the problem.

image
a.png1615×1026 31.1 KB

2

Please provide a codepen to test

4

I can’t reproduce the error on codepen. It only occurs on my laptop, and only in Chrome, not in Firefox. Looks like it’s caused by some racing conditions. Digged out this old post that appears reporting the same problem,

http://forum.ionicframework.com/t/ion-slide-box-and-ng-repeat/9826

The solution offered there is to add ng-if= to ion-slide-box, that worked for me.

To summarize: ng-repeat inside ion-slide-box may cause trouble. On top of that, if you have a promise to supply data to ng-repeat, ion-slide-box may not be able to update the initial screen and get stucked. Adding ng-if to avoid refreshing DOM before data is ready APPEARS solved the problem.