Ionic 1.2.4 - ion-slides content height issue

[WHarris22]

I am using the new ion-slides component and when the slide content height is bigger than the view I cannot scroll down to see the rest of the slide content.

This JSFiddle will hopefully demonstrate what I mean if you alter the size of the sub window that displays the result.

So what I would expect is that the content should scroll / slide down to see the rest of the content on the slide, if this can be fixed by applying some CSS or configuring the slider I apologise in advance for raising an issue

[girtonman]

I was able to get around this issue by nesting my content inside of an <ion-content>

ex:

<ion-slides>
  <ion-slide-page>
    <ion-content>
      <div>stuff</div>
    </ion-content>
  </ion-slide-page>
</ion-slides>

[WHarris22]

Sorry for the late response i've been busy with other projects. Your solution works but it brings another issue where the pager will cover the content at bottom of the slide (and in my slides this happens to be a button), and if the bullets collapse onto multiple lines then it covers even more etc.

One solution is to add a margin at the bottom of the <ion-content> child element (by using the height of the pager), but I can't figure out how to calculate the pagers height and do this.

I have tried using a directive but when this code is executed the pager hasn't yet been rendered so the height isn't accurate. Got any ideas? or should I raise a new issue for this do you think?

Update

Not to worry I found a workaround...

$scope.$watch('swiper.data.slider', function (nv, ov) {
        //hacky fix that adds a margin to the bottom of each slide.card element so that pagination won't overlap a card.
        //card > marginBottom is calculated as: pager height + 21 (21 = ionic card's existing 1px paddingBottom and 20px marginBottom)
        if (nv) {
            var pgHeight = nv.paginationContainer[0].offsetHeight;
            var slides = document.getElementsByClassName('inspection-task-slide');
            if (slides.length > 0) {
                for (var i = 0; i < slides.length; i++) slides[i].style.marginBottom = (pgHeight + 21) + 'px';
            }
        }            
    });

[feruzm]

Ionic 1.2.4 ion-slides doesn't show/work, not sure why. But JSFiddle in this report uses 1.2.1 and I used 1.2.1 older version to get it work, but still some updates are missing on 1.2.1 version. Any idea why 1.2.4 ion-slides is not functioning correct, I will need to use options, etc.? Thanks...

[danbucholtz]

Hi @WHarris22,

Is there anything we can do to help you with this? It seems like there are work arounds for your specific issue.

Please let me know if there is anything the framework should do differently. In the meantime, I am going to close this issue, but will reopen if needed.

Thanks, Dan

[maooson]

Try to add scroll="false" at the parent ion-content of the ion-slide-box. It works fine for me.

<ion-view>
  <ion-content scroll="false">
    <ion-slide-box>
      <ion-slide>
        <ion-content>
          <div class="box blue"><h1>BLUE</h1></div>
        </ion-content>
      </ion-slide>
      <ion-slide>
        <ion-content>
          <div class="box yellow"><h1>YELLOW</h1></div>
        </ion-content>
      </ion-slide>
      <ion-slide>
        <ion-content>
          <div class="box pink"><h1>PINK</h1></div>
        </ion-content>
      </ion-slide>
    </ion-slide-box>
  </ion-content>
</ion-view>

[WHarris22]

@danbucholtz maybe my problem was too specific for it to become a change within the framework. But if you wanted to review it i'd suggest to have an option for the ion-slides pager to either overlap slides or to not overlap.

@maooson your comment is in relation to Ionic's old slide-box and not the new ion-slides, but thanks for info.

[danbucholtz]

There are really two options that I can think of. Hide or style the pagination bullets, or you could try making a div that goes from the top of the screen to just above the pagination bullets, and add the <ion-content> there. Not sure if that will work, though.

[liuyao61]

@maooson Thanks, scroll="false" works for me. I assume won't be able to scroll within the slides?