Ionic 1 - View breaking on page load

@bikash336 wrote:

Page view break after load the page. Basically I called rest API on this page controller and based on $scope.data I was init a ng-loop on the page. When I entered this page looks like its break the view, if I refresh the page then its looks good. See the attache screen sort. I am using ionic v1.

First load view:

first-load.JPG489×832 18.7 KB

Page refresh view:

refresh-view.JPG479×824 25.8 KB

Controller:

.controller('ExamExeCtrl', function ($scope, $http, $state, $ionicHistory, $ionicSlideBoxDelegate,$timeout, $interval) {
$scope.questions = [];
$scope.loadQuestions = function () {
      $scope.showLoading("Loading...");
      $http.get('js/question.json').then(function (response) {
        $scope.hideLoading();
        $scope.questions = response.data;
      });
}
$scope.loadQuestions();
});

HTML:

<ion-view view-title="Test">
    <ion-content class="container no-padding">
        <div class="page-content exam-exe">
            <div class="panel">
                <div class="panel-body">
                    <div class="exam-exe__title">Your test name here {{timespent}}</div>
                    <div class="exam-exe__stats">
                        <span class="exam-exe__stats--count">7/30</span>
                        <span class="exam-exe__stats--timer">04:30</span>
                        <span class="exam-exe__stats--skip">SKIP</span>
                    </div>
                    <div class="exam-exe__pb">
                        <span style="width:30%"></span>
                    </div>
                    <div class="exam-exe__slider">
                        <ion-slide-box ng-init="disableSwipe()" class="exam-slider" does-continue="false" show-pager="false">
                            <ion-slide ng-repeat="(qIndex, qValue) in questions">
                                <div class="exam-exe__slider___slider-item">
                                    <div class="exam-exe__slider___slider-item____question">
                                        <h3>{{qValue.title}}</h3>
                                    </div>
                                    <div class="exam-exe__slider___slider-item____options">
                                        <button class="button button-block button-positive" ng-repeat="o in qValue.options" ng-click="checkAnswer(o.isCorrect, qValue.id)">{{o.text}}{{o.isCorrect}}</button>
                                    </div>
                                </div>
                            </ion-slide>
                        </ion-slide-box>
                    </div>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

Any solutions?

Posts: 1

Participants: 1

Read full topic