Search code examples
angularionic-frameworkionic6

Ionic V6 - ion-segment show too much white space between cards once filtered with ng-if

I have added ion-segment to my page which has a list of cards with different cases. If I don't use segment, the space between the cards is very normal. However, with the use of the segment I have to do the following to filter the data by status variable value. It leaves several big gaps between the cards. The height of the gap between the cards is based on the id of the card. For example - if the first id for a closed case is 55, second id for a closed case is 20, and third id for a closed case is 17. I see a much larger gap between the case id 55 and 20 than 20 and 17.

<ion-toolbar >
<ion-segment value="open" [(ngModel)]="selectedTabs">
  <ion-segment-button value="open">
    Open
  </ion-segment-button>
  <ion-segment-button value="closed">
    Closed
  </ion-segment-button>
  <ion-segment-button value="underreview">
    Under Review
  </ion-segment-button>
</ion-segment>
</ion-toolbar>

<!-- code for the cards -->
<ion-card *ngFor="let feed of feedData | filter:searchTerm" [routerLink]="[feed.id]">

   <div *ngIf="selectedTabs == 'open'">
  
      <div *ngIf="feed.status == 'Open'">
       
         Show open case data

      </div>

     <div *ngIf="feed.status == 'Closed'">
       
         Show closed case data

     </div>

   ... there are few more status codes but this should give you the idea
   </div>

</ion-card>

Ionic segment

Solution

  • The answer turned out to be a rather simple one, even though it cost me half a day. Need to create another DIV on the top.

    <div *ngFor="let feed of feedData | filter:searchTerm" [routerLink]="[feed.id]">

All other DIVS as needed. 

  <ion-card>
     Card Contents
  </ion-card>

</div>