0

I am using a component for ion slides with ion chips for making categories (ex. All, Comedy, etc as YouTube has on Home screen for quick searching).

This component is working fine but without rubber band effect when I open in modal, so I want that user only scroll till first & last chip in modal. But in modal chips are scrolling non stop.

#ionSlidesComponentWithChips

 <ion-item color="dark" class="border-top-1">
  <ion-slides [options]="slideOpts">
    <ion-slide *ngFor="let category of categories">
      <ion-chip color="light" has-bouncing="true">
        <ion-label>{{category}}</ion-label>
      </ion-chip> 
    </ion-slide>
  </ion-slides>
</ion-item>

I added component in modal.

<app-header></app-header>

<app-category-slides></app-category-slides>

<ion-content>

  <ion-backdrop class="ion-margin-top"></ion-backdrop>
  <img src="assets/imgs/{{img}}.jpg">
</ion-content>

<ion-footer translucent="false" class="ion-no-border" color="dark">

  <ion-item lines="none" text-center color="dark">
    <ion-grid>
      <ion-row class="ion-align-items-center ion-text-center">
        <ion-col>
          <ion-button color="light" fill="clear">
            <span class="material-icons">
              thumb_up
            </span>

          </ion-button>
          <span class="ion-padding">2.2k</span>
        </ion-col>
        <ion-col>
          <ion-button color="light" fill="clear">
            <span class="material-icons">
              thumb_down
            </span>
          </ion-button>
          <span class="ion-padding">20</span>
        </ion-col>
        <ion-col>
          <ion-button color="light" fill="clear">
            <span class="fa fa-share"></span>            
          </ion-button>
          <span class="ion-padding">Share</span>
        </ion-col>
        <ion-col>
          <ion-button color="light" fill="clear">
            <span class="material-icons">
              favorite
            </span>
          </ion-button>
          <span class="ion-padding">Save</span>
        </ion-col>

        <ion-col>
          <ion-button color="light" fill="clear" (click)="close()">
            <span class="material-icons">
              close
            </span>
          </ion-button>
        </ion-col>

      </ion-row>

    </ion-grid>
  </ion-item>

</ion-footer>

for better understanding the problem I just uploaded video: Please click here

Codex Cub
  • 1
  • 5
  • First of all you should not create common header component specially in ionic, It is recommended to have ion-header, ion-content and ion-footer on each page to have awesome animation. I see selector of slides is out of ion element it should be inside of ion-header or ion-content. – Indraraj26 Oct 01 '20 at 07:30
  • Thanks for your interest but when I place ion slides selector in ion-content it stops scrolling, and I tried to add it in header then it hides entire ion slides chips. – Codex Cub Oct 01 '20 at 07:40
  • Hey, can you create a reproducable via stackblitz? or just share full code? – Sergey Rudenko Oct 01 '20 at 14:54
  • Hi, I am new to StackBlitz. stuck in opening the modal here: https://stackblitz.com/edit/ionic-jymdjh?file=pages%2Fhome%2Fhome.html. I actually try to open the modal and there I will have to use ionic slides with chips. Thanks! – Codex Cub Oct 02 '20 at 06:33

0 Answers0