Slide Box not apperning



I’m new to ionic framework. I’m having problem display slide box images. they do not appear. I checked the codes and noticed width is set to 0. When i re-size window, it appears fine. i checked no other css or js effecting it. not sure why it’s happening.
Can any pro can help me fix this?



I wish. I am struggling with the same problem.
For me it only happens if I reload the page with the slide box, not when I transition to it via a click from another page.
It seems the browser is not reflowing the page, but doing the usual .offset() trick to trigger a reflow does not work.


Well I found a solution:

window.dispatchEvent(new Event('resize'));

…actually triggers the reflow. So executing this after the slide is rendered will cause it to become visible.


…except of course this doesn’t work on Android, I get “Illegal Constructor”


Back to the passed… The following seems to do it on Android as well:

var event = document.createEvent( 'Event' );
event.initEvent( 'resize', true, true );
window.dispatchEvent( event );


I have a similar issue. It seems to happen if the ion-slides are bound after an async or timed out binding.


Experiencing the same at random times, mostly on devices (Android & iOS). Any word from the Drifty guys on this matter? Forcing dispatchEvent seems a bit like a hack.


Can you guys provide codepen demoing this? Haven’t seen it in my tests


I can’t reproduce it in a pen, but it’s 100% reproducible in certain scenarios in my app, @mhartington I can mail the current version to you as before if you want.


Sure, if you want.

A quick fix I’ve found that could fix this, is to call

  $scope.$on('$ionicView.enter', function(){


Yes, calling .update() after .select() fixes the issue for me.
Better than my hacky resize solution :smile:

Don’t know if that tells you the problem, so I mailed you my www folder and steps to reproduce anyway.


This does not work for me. I load the ion-slides on the afterEnter event to smoothen the transition animation:

$scope.$on('$ionicView.afterEnter', function() {
    $scope.results = MyFactory.LoadData(); // load cached data (synchronous)
    $timeout(function () {
    }, 500);


<ion-slide-box on-slide-changed="slideHasChanged($index)" active-slide="selectedIndex">
    <ion-slide ng-repeat="person in results.items">
        <p>{{ person.description }}</p>

The update causes the slides to be stacked (e.g. the text of all is displayed through each other). Only when opening the first item does display the ion-box correctly. What could be the issue?


Can you throw this into a codepen?


did you ever find a solution to this? Thanks


I do not remember if it worked 100%, but looking at the code this is what I eventually wound up with:

    $scope.$on("$ionicView.afterEnter", function() {


    $scope.loadData = function() {

        // Get search result out of storage
        $scope.results = MyFactory.getResults();

        // Select the opened result
        $scope.selectedIndex = $stateParams.personId;

        $scope.currentPerson = $scope.results.items[$scope.selectedIndex];
        $scope.title = $;

        $timeout(function () {
            $ionicSlideBoxDelegate.slide($scope.selectedIndex, 0);

            $timeout(function() {
            }, 500);
        }, 100);

It has been a few months, but I vaguely recall it might had something to do with the $ionicSlideBoxDelegate.slide part