I have 3 “ion-slide” in height each other, for example:
Window 1. Height 3000px
Window 2. Height 1000px
And window 3. Height 300px
The height of the scroll is determined by the largest window,
Which means that if I see the window 3 I can scroll like I first window (3000px)
How can you fix it?
I’m getting this error multiplied by the number of pages that I have,
TypeError: Cannot read property 'length' of undefined
at circle (http://localhost/ionic-angular-cordova-seed-master/www/lib/js/ionic.bundle.js:5639:21)
at slide (http://localhost/ionic-angular-cordova-seed-master/www/lib/js/ionic.bundle.js:5666:30)
at slide (http://localhost/ionic-angular-cordova-seed-master/www/lib/js/ionic.bundle.js:6000:7)
at http://localhost/ionic-angular-cordova-seed-master/www/lib/js/ionic.bundle.js:34181:16
at Scope.$broadcast (http://localhost/ionic-angular-cordova-seed-master/www/lib/js/ionic.bundle.js:19336:28)
at Scope.$scope.gotoSlide (http://localhost/ionic-angular-cordova-seed-master/www/js/controllers.js:34:46)
at Object.<anonymous> (http://localhost/ionic-angular-cordova-seed-master/www/js/controllers.js:40:10)
at Scope.$digest (http://localhost/ionic-angular-cordova-seed-master/www/lib/js/ionic.bundle.js:18897:40)
at Scope.$apply (http://localhost/ionic-angular-cordova-seed-master/www/lib/js/ionic.bundle.js:19158:24)
at done (http://localhost/ionic-angular-cordova-seed-master/www/lib/js/ionic.bundle.js:14916:45)
You did not have a controller defined. I created a new sample for you. It gets pretty deep. It solves the problem of your each slide needing to be a different height.
I tried to implement your example and I got some very weird behavior on my app.
I posted what is happening here. If you could take a look and help me with the issue. Thanks!
I am not sure why it works with “pictures”, but when I build my slides by using “ng-repeat”, for all slides the height will be taken from the longer slide (even if I call update at the end)
Do you have any examples with 2-3 slides with different height built by utilizing ng-repeat ?
Thanks
Given a long text string, how can I paginate it across multiple slides? The number of characters per page is determined by container dimensions (responsive) and character font.
Is there a way to determine the height of the slide? Maybe, it is the screen height minus header and footer.
I’m sorry, but these are terrible solutions. You take a pretty big UX hit by hiding the pages during transitions. Kind of kills the joy of the slidebox. You could get around this by waiting until the transition is finished to hide, resize, and unhide, but these seems like an awful lot of work for something conceptually simple.
I am just getting started with Ionic and I am loving it so far, but this seems like one of those little weird spots.
Why can’t we just put tags inside a slide and get a nicely contained scrollable container? That is the way I would want it to work.
Anyway, thanks to the team for allt he great work and for the folks out there answering questions… it’s too late and I must go to bed. Would like to keep on playing.
Agreed. Hiding adjacent slides defeats the purpose of a slide box, essentially turning it into a swipe box.
Trying to find a workaround, as the extra space below short slides looks horrible. One hack that comes to mind is to reset the heights of all slides to the height of current slide whenever slide is changed/loaded, so that the extra content in other slides may overflow, or be hidden, and be displayed when they are the focused slide. Struggling with implementation of this hack though, if anyone gets any ideas on how to do this, please do share.
All right folks, seems like my pretty little hack is working.
Here’s a [codepen demo][1] .
Instructions:
Add the following directive peey-level-ion-slides to the ion-slide-box
containing variable height slides
Wrap up content in your ion-slide with a div with a class, and add the same class with -active suffix to the active slide’s wrapping div (ionic is missing the feature of adding a special class to the active slide so you have to do this yourself for now using ng-class, will add a feature request on ionic’s github for this).
Lastly you add a slide-child-class attribute on ion-slide-box and its value should be the class that you have chosen for wrapping divs, and you’re golden!
Here’s the hero directive:
.directive('peeyLevelIonSlides', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch (
function () {
var activeSlideElement = angular.element(element[0].getElementsByClassName(attrs.slideChildClass+"-active"));
//constantly remove max height from current element to allow it to expand if required
activeSlideElement.css("max-height","none");
//if activeSlideElement[0] is undefined, it means that it probably hasn't loaded yet
return angular.isDefined(activeSlideElement[0])? activeSlideElement[0].offsetHeight : 20 ;
},
function (newHeight, oldHeight) {
var sildeElements = angular.element(element[0].getElementsByClassName(attrs.slideChildClass));
sildeElements.css("max-height",newHeight+"px");
}
);
}
}
})
Very nice, peey. This appears to be working well in the Codepen. I haven’t looked closely yet, but do you think there are any issues with using async data here and updating the Slide box with $SlideBoxDelegate.update()?
The active slide is allowed to freely change its height, so I think it should be okay. I’m using it for dynamic height content myself, and it seems to be working quite nicely!