bug: ion-content scrolling not working with ion-slides directive (v1.2.1) about ionic-v1 HOT 7 OPEN

From @vchangal on December 29, 2015 13:16

Okey,

I found that the option autoHeight was existing (default value: false).

So I tried to use it.

Codepen:
https://codepen.io/anon/pen/LGNMLZ

There is two issues that I have encountered here:
1- When the swiper is initialised and if there is no page available (typically if pages are dynamically loaded) an error is raised:

TypeError: Cannot read property 'offsetHeight' of undefined
    at Object.s.updateAutoHeight (ionic.bundle.js:9384)
    at Object.s.slideTo (ionic.bundle.js:10575)
    at Object.s.init (ionic.bundle.js:12117)
    at Object.Swiper (ionic.bundle.js:12227)
    at ionic.bundle.js:63351
    at ionic.bundle.js:30891
    at completeOutstandingRequest (ionic.bundle.js:18576)
    at ionic.bundle.js:18848(anonymous function) @ ionic.bundle.js:25512ident.$get @ ionic.bundle.js:22291(anonymous function) @ ionic.bundle.js:30894completeOutstandingRequest @ ionic.bundle.js:18576(anonymous function) @ ionic.bundle.js:18848

ionic.bundle.js:25512 TypeError: Cannot read property 'update' of undefined
    at ionic.bundle.js:63319
    at ionic.bundle.js:30891
    at completeOutstandingRequest (ionic.bundle.js:18576)
    at ionic.bundle.js:18848

After a quick analyse, the issue is that in file slidesView.js from ionic framework (function updateAutoHeight line 584 in v1.2.1), we try to access a dom attribute for the active slide. As the active slide is undefined (does not exist) we raise an error.

2- The function updateAutoHeight in slidesView.js only updates the height of the wrapper (not the container). Moreover it uses offsetHeight instead of scrollHeight.

To avoid the two issues, one can patch the updateAutoHeight with the following code:

s.updateAutoHeight = function () {
    // Update Height
    if (typeof s.slides.eq(s.activeIndex)[0] !== 'undefined') {
        var newHeight = s.slides.eq(s.activeIndex)[0].scrollHeight;
        if (newHeight) {
            s.wrapper.css('height', newHeight + 'px');
            s.container.css('height', newHeight + 'px');
        }
    }
};

from ionic-v1.

From @jjhester on February 14, 2016 19:9

Thank you for that fix!

from ionic-v1.

From @anthony-o on March 31, 2016 21:10

Any news about this bug? I still have it in 1.2.4...

from ionic-v1.

From @anthony-o on March 31, 2016 21:19

I've tried your patch but I have a small remark: autoHeight is working but the pager falls at the bottom of the page (so is not visible until I scroll to the end). Is there a way to make it sticky to the bottom of the page in absolute? (in order not to have to scroll to the end to see it)

from ionic-v1.

From @konsultaner on August 2, 2016 14:43

I have experienced the same bug with ionic 1.3.1. I fixed this with overflow-scroll="true". But when I start the my app on ios for the first time this error keeps appearing. After the next restart everything seems to work perfectly.

from ionic-v1.

From @konsultaner on August 3, 2016 10:25

[UPDATE] overflow-scroll didn't fix it. it was indeed the restart ofthe app.

from ionic-v1.

I still had to use this fix in 1.3.2. I updated the code as follows:

y.updateAutoHeight=function(){// Update Height
    if (typeof y.slides.eq(y.activeIndex)[0] !== 'undefined') {
        var newHeight = y.slides.eq(s.activeIndex)[0].scrollHeight;
        if (newHeight) {
            y.wrapper.css('height', newHeight + 'px');
            y.container.css('height', newHeight + 'px');
        }
     }
}

from ionic-v1.