Ion slide box issue of two slides shown at the same time

Ion-slide-box is a simple directive that allows you to create a very simple slider for your mobile or web applications. Slide box contains pages or slides and display one page or slide at a time, that can be changed by swiping the screen.

More on ion-slide-box; http://ionicframework.com/docs/api/directive/ionSlideBox/

I am using ion-slide-box to display different forms. One form is displayed at a time and the next form will be shown after correctly filling up the current form, i.e each form will be displayed after certain conditions are fulfilled. This works great till ionic version 1.2.4 but the problem occurs after updating ionic library to 1.3.1. 

After loading the page, ion-slide-box doesn't work correctly, i.e two slides are shown at the same time and gets automatically fixed after opening the web inspector or resizing the page.

I personally solved this problem by using $timeout service and ng-if. ng-if is a angular directive which adds or remove the HTML element according to the expression evaluation. If it is false, element is removed and in case it is true, element is added to the DOM.

More about ng-if you can read in its official documentation: https://docs.angularjs.org/api/ng/directive/ngIf

Just add an ng-if with variable renderSlides in ion-slide-box in your HTML. In the controller, take this variable in scope and set it to false initially and in $timeout function set renderSlides to true with the delay of about 50ms.

In AngularJS $timeout works same like setTimeout function in Javascript. By using $timeout service we can set some time delay (in this case it is 50ms) to execute functions or methods or to render views in HTML.

More about $timeout service: https://docs.angularjs.org/api/ng/service/$timeout

Now just have a look at the code: 

HTML:

JS:

$scope.renderSlides = false;
$timeout(function() {
    $scope.renderSlides = true;
}, 50);    
   

Hope this helps.

THANKS