ion-slides with ion-infinite-scroll having issues with scrolling

[shahroon]

Short description of the problem:

So, I just switched to Ionic 1.2.4 and as per Ionic new release we now have new ion-slides available for scrolling, I shifted to ion-slides from ion-slide-box. I have 3 slides, all of them different data lengths, the scroll bar takes the max height from any slide and then that is applied on all slides.

What behavior are you expecting?

I want the scroll to be independent of any other slide;s data length. I already tried $ionicScrollDelegate.resize() nothing changed.

Steps to reproduce:

1. Use ion-slides
2. Put ion-infinite-scroll for scrolling
3. Swipe to the slide where there is max data
4. Back to any previous slide, you will notice the scroll bar with max length.

    <ion-content class="has-header has-footer">
        <ion-slides options="sliderOptions" slider="swiper">
            <ion-slide-page>
                <myDashboardOrder clientOrders="todaysOrders"></myDashboardOrder>
            </ion-slide-page>

            <ion-slide-page>
                <myDashboardOrder clientOrders="upcomingOrders"></myDashboardOrder>
            </ion-slide-page>

            <ion-slide-page>
                <myDashboardOrder clientOrders="pastOrders"></myDashboardOrder>
            </ion-slide-page>
        </ion-slides>
        <ion-infinite-scroll
            ng-if="isSelected(2)"
            icon="ion-loading-c"
            on-infinite="getPastOrders()">
        </ion-infinite-scroll>
    </ion-content>

Which Ionic Version? 1.x or 2.x 1.2.4

Run ionic info from terminal/cmd prompt: (paste output below) Cordova CLI: 5.4.1 Ionic Version: 1.2.4 Ionic CLI Version: 1.7.14 Ionic App Lib Version: 0.7.0 OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.4 LTS Node Version: v0.12.4

[shahroon]

Fixed the scroll height issue by placing ion-content inside every slide. But now having issues with

<ion-infinite-scroll ng-if="isSelected(2)" icon="ion-loading-c" on-infinite="getPastOrders()"> </ion-infinite-scroll>

Now getting these errors, angular.js:11706 TypeError: Cannot read property 'isNative' of null TypeError: Cannot read property 'scrollWidth' of undefined

[shahroon]

Fixed it, by keeping the ion-infinite-scroll inside particular ion-content.

[cinder92]

i'm having same error

CLI : 2.0.0

@shahroon do you have an example with multiple slides and infinity scroll? please!

[shahroon]

ion-slides.txt

[XiaoLuo01]

if i don't want to placing ion-content inside every slide, do you have any other ways to solve it? because my project have many slides with many content!

[miquelferrerllompart]

Hi, I have the same problem here. I try to put inside each but doesn't work.

Now I have this ->

<ion-header></ion-header>
<ion-content>
  <ion-slides>
    <ion-slide>
      <ion-content>
        <ion-list></ion-list>
        <ion-infinite-scroll></ion-infinite-scroll>
      </ion-content>
    </ion-slide>
    <ion-slide>
      <ion-content>
        <ion-list></ion-list>
        <ion-infinite-scroll></ion-infinite-scroll>
      </ion-content>
    </ion-slide>
    <ion-slide>
      <ion-content>
        <ion-list></ion-list>
        <ion-infinite-scroll></ion-infinite-scroll>
      </ion-content>
    </ion-slide>
    ...
  </ion-slides>
</ion-content>

This it work for me, but on iOS i have a bug with transitions, I think because there are more than one ion-content's

Any Solution?

[skinet2009]

I have a problem with scrolling. No matter where to place - inside a slide or outside, it works only for the first slide. Ionic version 3.19.1

[vibinflogesoft]

@shahroon This is not working with dynamic slides. Did u check this? Why did you close the issue? my ionic version:3.9.2

[shahroon]

@vibinflogesoft It did work for me, and it's been a long time since I worked on any Ionic project. So, I suggest you better check the latest docs on https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/ and see if you can find something there.

[vibinflogesoft]

Hi@shahroon , Thanks for your reply,but Iam handling latets ionic docs and still have the issue with dynamic data. I think these may solve by the ionic team.Hopefully waiting for the fix.

[jhoansebastianlara]

Basically you have to wrap your slide content with an <ion-content> tag:

<ion-slide>
      <ion-content>
        <ion-refresher (ionRefresh)="doRefresh($event)">
          <ion-refresher-content></ion-refresher-content>
        </ion-refresher>

        <your-custom-component>
        </your-custom-component>

        <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
          <ion-infinite-scroll-content></ion-infinite-scroll-content>
        </ion-infinite-scroll>
      </ion-content>
    </ion-slide>

Note: after that, you are going to see nothing so you have to modify slide-zoom class and that's it!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.