Ion slide css breaks when using ng-repeat

ionic-v1
#1

The following code works perfectly in my app.

<ion-view title="Promotions">
    
    <ion-slide-box active-slide="myActiveSlide">
        <ion-slide>
            <div class="box blue"><h1>BLUE</h1></div>
        </ion-slide>
        <ion-slide>
            <div class="box yellow"><h1>YELLOW</h1></div>
        </ion-slide>
        <ion-slide>
            <div class="box pink"><h1>PINK</h1></div>
        </ion-slide>
    </ion-slide-box>
    
    
</ion-view>

but when I use ng-repeat as follows the output gets messy,

<ion-view title="Promotions">
    
    <ion-slide-box active-slide="1">
        <ion-slide ng-repeat="obj in promotions">
            <div class="box blue"><h1>BLUE</h1></div>
        </ion-slide>
            </ion-slide-box>
    
    
</ion-view>

image

CSS used is as follows;

.slider {
  height: 100%;
}
.slider-slide {
  padding-top: 80px;
  color: #000;
  background-color: #fff;
  text-align: center;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.pink {
  background-color: pink;
}

Can someone please explain why this is happening and also suggest a possible fix? Thank you in advance.

#2

try to add : $http.get(‘source.JSON’).success(function(data) {
$scope.data = data;
$ionicSlideBoxDelegate.update();

});

#3

Call

$scope.$on("$ionicView.enter",function(){
   $ionicSlideBoxDelegate.update();
});

Or @sarale’s suggestion

1 Like