Ion-slide-box doesn't appear unless we update the page


#1

Hello all
My page contains special structure for landscape and another one for portrait mood and in each one there is <ion-slide-box> item.

My problem is when switch display from landscape to portrait, this hides ion slide box
And when refresh the page in Firefox, the slide box appears normally !!

any idea what’s going on here?


#2

@Shams, can you please add your code in CopePen or something?


#3

@meni it is very difficult to add my code in CodePen, because there is alot of nested Views and a big number of images but I’ll write here the part that related to the problem
and I would like to thank you very much for your interest.

<ion-view >
    <ion-content class="has-header">
        <div class="wrapper">
            <div class="container landscape">
                <div class="row one" ng-controller="SliderBoxCtrl1">
                            <div class="col-offset-10"></div>
                            <div class="col-65" >
                            <ion-slide-box active-slide="myActiveSlide" on-slide-changed="slideHasChanged($index)" >
                                <ion-slide class="slider-slide" data-index="1">
                                <div class="contentpage">
                                    <img class="basicImage" src="img/01.jpg" >
                                </div>
                                </ion-slide>
                                <ion-slide class="slider-slide" data-index="2">
                                        <div class="contentpage">
                                            <img class="basicImage" src="img/02.jpg" >
                                        </div>
                                </ion-slide>
                                <ion-slide class="slider-slide" data-index="3">
                                        <div class="contentpage">
                                            <img class="basicImage" src="img/03.jpg" >
                                        </div>
                                </ion-slide>
                                <ion-slide class="slider-slide" data-index="4">
                                        <div class="contentpage">
                                            <img class="basicImage" src="img/04.jpg" >
                                        </div>
                                </ion-slide>
                                <ion-slide class="slider-slide" data-index="5">
                                        <div class="contentpage">
                                            <img class="basicImage" src="img/05.jpg" >
                                        </div>
                                </ion-slide>
                                <ion-slide class="slider-slide" data-index="6">
                                        <div class="contentpage">
                                            <img class="basicImage" src="img/06.jpg" >
                                        </div>
                                </ion-slide>
                            </ion-slide-box>

                            </div>
                            <div class="col-25">
                                <div class="list menu">
                                    <ion-list>
                                        <ion-item>
                                            <p class="name">Name</p>                                             
                                        </ion-item>
                                        <ion-item>
                                            <p class="name">Size</p>                                                
                                        </ion-item>
                                        <ion-item>
                                            <p class="name">Price</p>                                              
                                        </ion-item>                                                                                       
                                    </ion-list>
                                </div>
                            </div>
                        </div>
                </div>


            <div class="container portrait">
                <div ng-controller="SliderBoxCtrl1">
                <div class="row one">
                        <ion-slide-box active-slide="myActiveSlide" on-slide-changed="slideHasChanged($index)" >
                            <ion-slide class="slider-slide" data-index="1">
                                <div class="contentpage">
                                    <img class="basicImage" src="img/01.jpg" >
                                </div>
                            </ion-slide>
                            <ion-slide class="slider-slide" data-index="2">
                                <div class="contentpage">
                                    <img class="basicImage" src="img/02.jpg" >
                                </div>
                            </ion-slide>
                            <ion-slide class="slider-slide" data-index="3">
                                <div class="contentpage">
                                    <img class="basicImage" src="img/03.jpg" >
                                </div>
                            </ion-slide>
                            <ion-slide class="slider-slide" data-index="4">
                                <div class="contentpage">
                                    <img class="basicImage" src="img/04.jpg" >
                                </div>
                            </ion-slide>
                            <ion-slide class="slider-slide" data-index="5">
                                <div class="contentpage">
                                    <img class="basicImage" src="img/05.jpg" >
                                </div>
                            </ion-slide>
                            <ion-slide class="slider-slide" data-index="6">
                                <div class="contentpage">
                                    <img class="basicImage" src="img/06.jpg" >
                                </div>
                            </ion-slide>
                        </ion-slide-box>
                    </div>
                    <div class="row">
                        <div class="list menu">
                            <ion-list>
                                <ion-item>
                                    <p class="name">Name</p>
                                </ion-item>
                                <ion-item>
                                    <p class="name">Size</p>
                                </ion-item>
                                <ion-item>
                                    <p class="name">Price</p>
                                </ion-item>                                   
                            </ion-list>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

In previous page HTML and this JS code:

.controller('SliderBoxCtrl1',function($scope,$ionicSlideBoxDelegate){
        $scope.$root.canDrag = true;
        $scope.myActiveSlide = 0;
        $scope.num=$scope.myActiveSlide;
        alert("num ="+  $scope.num );
        $scope.slideHasChanged = function(slideNum) {
            $ionicSlideBoxDelegate.update();
            $scope.num= slideNum;
            $ionicSlideBoxDelegate.update();
            console.log('SlideNum = ' + slideNum);
        };
})

Here alert doesn’t pop up when change display from landscape to portrait, And therefore this part of the code is not applied except when update the page…


#4

@Calendee @mhartington can you help me please ?


#5

The way it is written write now, you have no logic in the view to decide which slidebox to show. So, effectively, you actually have 2 slideboxes on the view at the same time.

I’d start there and see if you can use an ng-if to change the structure of the page so only one slidebox has to be written.


#6

Thank you @Calendee

You are right :blush: I forgot to say this:

I decide which slidebox to show By CSS and media queries
In landscape mode I make this

.landscape{
display: block;
}
.portrait{
    display: none;
}

and with portrait :

.landscape{
        display: none ;
    }
    .portrait{
        display: block;
    }

#7

I’m still a bit worried about that. I’m not sure that keeps Ionic from trying to use it. Use your browser’s inspect element option to see if it’s still in the DOM. If it is, I bet Ionic is still seeing it and trying to use it.

I’m not sure that will be a problem necessarily, but I would not want both of those in the DOM at the same time. Especially with images.


#8

Yes, I used firebug and sure, it’s still in the DOM.
and when move mouse over it’s parent <div class="row one"> I see it’s area,
but when I move the mouse over <ion-slide-box> nothing appears in the page :$$

I’ll try to use ng-if
I apologize for my questions that seem perhaps a beginner some thing … but it’s my first app
Thank you very much again


#9

Actually, I’m seeing this problem in some cases as well.

If you open the inspector and look at the <ion-slide-box>, do you see :

style="width: 0px; height: 0px;"

I get this after navigating a bunch in my app.


#10

yes, I get this

style="width: 0px;"

What is the cause of this problem??


#11

I’m not sure but I opened this issue on it a few days ago. https://github.com/driftyco/ionic/issues/2628