Is it possible to use this directive in an ion-slides?

[jorgemejia]

Hi i´m trying to use this directive in an ion-slides this is the code i´m using.

What i´m trying to do is to sticky the header in this case is the day.

<ion-content padding #content no-bounce style="background-image: url('assets/img/bg/2.jpg');">
  <ion-slides>
     <ion-slide *ngFor="let day of days">
         <div class="card-content">
             <div class="card-header">
                  <h3 ion-affix [content]="content" (onSticky)="sticky($event)" class="margin_top_0 margin_bottom_0 mayuscula">{{ day === weekDay? 'TODAY' : day }}</h3>
             </div>
            <div *ngFor="let activitie of navData['activities'][day]" class="card-body">
                <div class="card-activity" (click)="scheduleEvent(activitie, day, $event, activitie['schedule'])">
                  <div class="activity-hour"> {{ activitie['hour'] }} </div>
                  <div class="activity-title">{{ activitie['name'] }}</div>
                  <div class="activity-title">{{ activitie['place'] }}</div>
                  <div *ngIf="activitie['schedule']" [ngClass]="{'is_schedule' : activitie['schedule'], 'is_not_schedule': !activitie['schedule']}" ><ion-icon name="alarm"></ion-icon></div>
                </div>
            </div>
        </div>
    </ion-slide>
  </ion-slides>
</ion-content>

page-demo {

  .swiper-container {
    width: 100%;
    padding-top: 5px;
  }
  .swiper-slide {
    background-color: transparent;
    text-align: center;
    font-size: 18px;
    width: 75%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: block;
    overflow-y: scroll;
  }

  ion-content, ion-content {
    background-color: #1066ab !important;
  }
  .card-content{
    width: 100%;
    order-radius: 8px;
  }

  .card-content .card-header h3{
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .card-content .card-body .card-activity .activity-hour{
    text-align: left;
    margin-left: 12px;
    margin-bottom: 12px;
    font-size: 15px;
  }
  .card-content .card-body .card-activity .activity-title{
    margin-bottom: 10px;
    font-size: 15px;
  }
  .is_not_schedule{
    position: absolute;
    top: 6px;
    right: 10px;
    color: grey;
  }

  .is_schedule{
    position: absolute;
    top: 6px;
    right: 10px;
    color: #F44336;
  }

  .card-header {
    width: 75%;
    position: fixed;
    z-index: 100;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 0px !important;
  }
  .card-content .card-body {
    width: 100%;
    padding-bottom: 0px !important;
    position: relative;
    display: block;
  }

  .card-content .card-body .card-activity{
    width: 100%;
    padding-bottom: 0px !important;
    position: relative;
    display: block;
    -webkit-box-shadow: 2px 2px rgba(19, 13, 13, 0.48);
    margin-bottom: 26px;
    padding: 10px;
    border-right: solid 2px rgba(19,13,13,0.48);
    height: 100px;
  }

  .content-ios {
    color: #040200 !important;
    background-color: #fff;
  }

}

This is how I nitialize the slider.

import { Component , ViewChild} from '@angular/core';
import { NavController , NavParams , Slides} from 'ionic-angular';

@Component({
  selector: 'page-demo',
  templateUrl: 'demo.html'
})
export class ActividadPage {

  @ViewChild(Slides) slider: Slides;

  public navData = [];
  public days    : Array<string>;

  constructor(public navCtrl: NavController) {
       this.navData = {
    "activities":
        {
            "monday":
             [
               {"description":"","finish":"","id":"1","hour":"9:00am","lat":"","long":"","name":"LOST OBJECTS GAME","order":"1","set":true},
               {"description":"","finish":"","id":"2","hour":"10:00am","lat":"","long":"","name":"MY GYM ART EXPLORERS","order":"2","set":true},
               {"description":"","finish":"","id":"3","hour":"11:00am","lat":"6768723","long":"-869875","name":"MY GYM OPEN PLAY","order":"3","set":true},
               {"description":"","finish":"","id":"2","hour":"12:00pm","lat":"354654","long":"-68769","name":"MY GYM AQUA CHALLENGE (KIDS POOL)","order":"4","set":true},
               {"description":"","finish":"","id":"4","hour":"1:00pm","lat":"","long":"","name":"LUNCH TIME","order":"5","set":true},
               {"description":"","finish":"","id":"2","hour":"2:00pm","lat":"1321354","long":"-3436546","name":"KARAOKE","order":"6","set":true},
               {"description":"","finish":"","id":"2","hour":"3:00pm","lat":"1321354","long":"-3436546","name":"FACEPAINTING","order":"6","set":true},
               {"description":"","finish":"","id":"2","hour":"4:00pm","lat":"1321354","long":"-3436546","name":"BRACELETS","order":"6","set":true},
               {"description":"","finish":"","id":"2","hour":"5:00pm","lat":"1321354","long":"-3436546","name":"CLOSED","order":"6","set":true},
               {"description":"","finish":"","id":"2","hour":"7:30pm","lat":"1321354","long":"-3436546","name":"PUPPETS SHOW (8:00PM) NIGHT PERFORMANCE (THEATER)","order":"6","set":true}
              ],
          "tuesday":
              [
                {"description":"","finish":"","id":"1","hour":"9:00am","lat":"","long":"","name":"MY GYM PARENTS & BABY (AGES 1MO - 2YRS)","order":"1","set":true},
                {"description":"","finish":"","id":"2","hour":"10:00am","lat":"","long":"","name":"ZUMBA KIDS","order":"2","set":true},
                {"description":"","finish":"","id":"3","hour":"11:00am","lat":"6768723","long":"-869875","name":"SPACE ROCKET","order":"3","set":true},
                {"description":"","finish":"","id":"2","hour":"12:00pm","lat":"354654","long":"-68769","name":"MY GYM ON THE BEACH - GAMES & RELAYS (KIDS ONLY MEETING POINT AZULITOS)","order":"4","set":true},
                {"description":"","finish":"","id":"4","hour":"1:00pm","lat":"","long":"","name":"LUNCH TIME","order":"5","set":true},
                {"description":"","finish":"","id":"2","hour":"2:00pm","lat":"1321354","long":"-3436546","name":"NICK TIME (SPONGE BOB & PATRICK)","order":"6","set":true},
                {"description":"","finish":"","id":"2","hour":"3:00pm","lat":"1321354","long":"-3436546","name":"FACEPAINTING","order":"6","set":true},
                {"description":"","finish":"","id":"2","hour":"4:00pm","lat":"1321354","long":"-3436546","name":"WATER BALLOON PLAY (KIDS POOL)","order":"6","set":true},
                {"description":"","finish":"","id":"2","hour":"5:00pm","lat":"1321354","long":"-3436546","name":"CLOSED","order":"6","set":true},
                {"description":"","finish":"","id":"2","hour":"7:30pm","lat":"1321354","long":"-3436546","name":"MOVIE NIGHT & POP CORN (THEATER 7:30)","order":"6","set":true}
             ],
         "wednesday":
             [
               {"description":"","finish":"","id":"1","hour":"9:00am","lat":"","long":"","name":"MY GYM PARENTS & TODDLER (AGES 2YRS-4YRS)","order":"1","set":true},
               {"description":"","finish":"","id":"2","hour":"10:00am","lat":"","long":"","name":"PIRATE HAT","order":"2","set":true},
               {"description":"","finish":"","id":"3","hour":"11:00am","lat":"6768723","long":"-869875","name":"PLAY TIME","order":"3","set":true},
               {"description":"","finish":"","id":"2","hour":"12:00pm","lat":"354654","long":"-68769","name":"MY GYM TREASURE HUNT","order":"4","set":true},
               {"description":"","finish":"","id":"4","hour":"1:00pm","lat":"","long":"","name":"LUNCH TIME","order":"5","set":true},
               {"description":"","finish":"","id":"2","hour":"2:00pm","lat":"1321354","long":"-3436546","name":"NICK TIME (DORA & BOOTS)","order":"6","set":true},
               {"description":"","finish":"","id":"2","hour":"3:00pm","lat":"1321354","long":"-3436546","name":"FACEPAINTING","order":"6","set":true},
               {"description":"","finish":"","id":"2","hour":"4:00pm","lat":"1321354","long":"-3436546","name":"FOOD SHAPES (COOKING CLASS MEETING POINT AZULITOS)","order":"6","set":true},
               {"description":"","finish":"","id":"2","hour":"5:00pm","lat":"1321354","long":"-3436546","name":"CLOSED","order":"6","set":true},
               {"description":"","finish":"","id":"2","hour":"7:30pm","lat":"1321354","long":"-3436546","name":"MY GYM PARENTS NIGHT OUT GAMES (AT THE PLAY HOUSE 7:30) (4-12 YRS) NIGHT PERFORMANCE (THEATER)","order":"6","set":true}
             ]
        }
}

      this.days = Object.keys(this.navData['activities']);
  }

  ionViewDidLoad() {
    this.slider.slidesPerView = 'auto';
    this.slider.centeredSlides = true;
    this.slider.paginationClickable = true;
    this.slider.spaceBetween = 30;
    this.slider.loop = true;
  }

}

[jonaszuberbuehler]

Can you post a minimal example (template) where I can reproduce the issue? I've tried quickly but slides don't seem to be meant to be scrollable (vertically). I need to see how you're using them.

[jorgemejia]

I´ve update the example

[jonaszuberbuehler]

Thx for the update, but the scrolling still does not happen for me. Could you also post your scss file? I guess you modify in there the overflow style somehow.

[jorgemejia]

Sorry about that :( I´ve update again.

[jorgemejia]

Can you reproduce the example ?

[jonaszuberbuehler]

Sorry, didn't get a chance yet. I'll try once I have better connection.

[jonaszuberbuehler]

Yes, I can reproduce it. Will have a look, but I'm not sure if there's a 'clean' fix for this. Will post back.

[jonaszuberbuehler]

@jorgemejia Can you please try the following and tell me if this will work for you? Instead of modifying the slides CSS I tried the approach using an ion-scroll. The solution is not perfect (yet) but looks like a way to continue. This is my template:

<ion-header>
    <ion-navbar>
        <ion-title>
            Sticky w/ ion-slides
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding scrollY="false">
    <ion-slides>
        <ion-slide *ngFor="let day of days">
            <ion-scroll scrollY="true" style="height:80vh" #content>
                <ion-card>
                    <ion-item ion-affix [content]="content" no-lines>
                        <h3>{{day}}</h3>
                    </ion-item>
                    <ion-card-content>
                        <div *ngFor="let item of items" class="card-body" style="height: 80px">
                            {{item}}
                        </div>
                    </ion-card-content>
                </ion-card>
            </ion-scroll>
        </ion-slide>
    </ion-slides>
</ion-content>

This is my component:

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';

@IonicPage({
    name: 'slides',
    priority: 'high'
})
@Component({
    templateUrl: 'slides.html'
})
export class SlidesPage {
    days = ['SUNDAY', 'MONDAY', 'TUESDAY'];
    items = Array.from({length: 15}, (value, key) => key);

}

The only CSS change I added was

.swiper-slide {
    display: block;
}

Do you think this approach is working for you?

[jorgemejia]

This works fine in the web browser, but in iOS sometimes disappear the entire slide, the header sticky transition is slow and when I scroll down appears the header twice (one small and the sticky)

[jonaszuberbuehler]

Argh, ok. I will have another look when I have time. If you have a fix PRs are always welcome :).

[jorgemejia]

Thanks alot for your time, if I have a better way to do it i will post it.