Scroll in segment with list of cards not working

Ionic Framework ionic-v3
1

I am trying to implement ion-segment with ion-list containing an array of ion-card. My template is as follows:

<ion-content padding>
  <ion-segment [(ngModel)]="relationship">
    <ion-segment-button value="following">Following</ion-segment-button>
    <ion-segment-button value="public">Public</ion-segment-button>
  </ion-segment>
  <div [ngSwitch]="relationship" style="height:100%">
    <ion-list *ngSwitchCase="'following'">
      <ion-card *ngFor="let feed of followingFeed">
          ...
      </ion-card>
    </ion-list>
    <ion-list *ngSwitchCase="'public'">
      <ion-card *ngFor="let feed of publicFeed">
          ...
      </ion-card>
    </ion-list>
  </div>
</ion-content>

Switching between segments works fine, but scrolling within each segment does not work.

2

Replace your first
<div [ngSwitch]="relationship" style="height:100%">
with
<ion-scroll scrollY="true" [ngSwitch]="relationship" style="height:100%">
it will make your cards list scrollable and your segment button will stick to the top!

1 Like
3

I’ve tried it and it worked. But when I added an ion-searchbar before the ion-segment the scroll doesn’t scroll all the way. I had button elements within the ion-card that are no long visible

4

Why dont you add the searchbar and the segment buttons in a ion-header ? That eay you will no longer need the ion-scroll . Your segment buttons , and searchbar will be wrapped each in a ion-toolbar into the ion-header. And if you have problems with the content which will get under the header just add an id to the content , lets say #contentId. After in your component get the content reference using ViewChild(“contentId”) contentId : Content. After in ngAfterViewInit, use this.contentId.resize()

5

I’ve tried what you’ve suggested with the segment buttons in the header, and with the searchbar removed but the problem still exists. I’m still unable to scroll.

6

I’m having the same problem.

It looks like there’s a bug in ion-segment…

7

ion-scroll tag doesn’t exist in Ionic 3… if you use it, the whole search page will disappear.
so there isn’t any solution to this problem yet.
Ion-segment automatically deactivates y-axis scroll for its contents…

8

Until Ionic team fixes this bug, the best solution to this problem is creating your own tabs based on Angular and then styling it using CSS3.
Angular tab uses regular divs so I think it will work well with looped ion-item tags. Go with angular 5 tabs instead of ion-segment. They function just the same…