Slide-box Dynamic Height

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?

Thank you!


Another small problem,
With this code:

.controller('ListCtrl', function($scope, EventService,$location,$localStorage, $ionicActionSheet, $translate,$stateParams){

$scope.gotoSlide = function(index) { $scope.$broadcast('slideBox.setSlide', index); };

var slidenum = $stateParams.slidenum;

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) 

I think you are going to need to setup a CodePen sample. It will be hard for us to understand the concept otherwise.

1 Like

It’s my first time that I work with CodePen
I copied the pattern seen in the past but it somehow did not work,
But this idea of ​​the slide-box

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.


Thanks this is what I wanted!
But it does not work for me, may be because I’m using: Ionic, v0.10.0-alpha-1045 ?

I’m getting this error

TypeError: Object # <Object> has no method 'currentIndex'

Try “currentSlide” then. Otherwise you’re going to need to dig through the old Ionic code for the slideBox controller.

1 Like

Does not work: (
If I write

console.log($ ionicSlideBoxDelegate); 

So I get

Object {update: function, register: function}

Hi @Calendee,

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’m not sure I understand what the problem is either. So, a CodePen sample would help.

On the new version of the ionic it works

Line 20 I added {{$index}}, if you remove that line, the second slide’s content doesn’t show up.

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 ?

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. :smile:

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] .


  1. Add the following directive peey-level-ion-slides to the ion-slide-box
    containing variable height slides
  2. 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).
  3. 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
                    //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));

I’ll add more info soon, if required

1 Like

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!

Probably a better solution than this hack is to put ion-content inside ion-slide - see codepen at Vertically scroll-able lists/contents in ion-slidebox .

1 Like