Slide Box not apperning

ionic-v1
1

Hi,

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?

thanks
-Navi

2

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.

3

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.

1 Like
4

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

5

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 );
6

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

7

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.

8

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

9

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.

10

Sure, if you want.

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

  $scope.$on('$ionicView.enter', function(){
    $ionicSlideBoxDelegate.update();
  })
1 Like
11

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.

12

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 () {
        $ionicSlideBoxDelegate.update();
        $ionicLoading.hide();
    }, 500);
});

View:

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

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?

13

Can you throw this into a codepen?

14

did you ever find a solution to this? Thanks

15

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();
    });

    $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 = $scope.currentPerson.name;

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

            $timeout(function() {
                $ionicLoading.hide();
            }, 500);
        }, 100);
    }

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

1 Like