I am attempting to iterate through an array of objects in order to generate a set of cards, either FULLWIDTH or halfwidth with the last one centered if the count is an odd number.
I have created a component that contains the card layout and I am using *ngFor to loop through the array. However, I am facing an issue where the column size does not change regardless of the attributes I input or their placement (inside or outside the loop). The cards are resizing dynamically based on the text content.
<ion-row>
<app-artist-view *ngFor="let deal of loadedEvent.deals" [deal]='deal'></app-artist-view>
</ion-row>
<ion-col size = "12">
<ion-card>
<ion-item>
<ion-label class="ion-text-center">{{deal.title}}</ion-label>
</ion-item>
<ion-card-content class="ion-text-center">
<ion-card-subtitle>Name: {{deal.talent.name}}</ion-card-subtitle>
<ion-card-subtitle>{{deal.performanceType}}</ion-card-subtitle>
<ion-card-subtitle>Length: {{deal.performanceLength}}</ion-card-subtitle>
<ion-card-subtitle>Status: {{deal.status}}</ion-card-subtitle>
<ion-card-subtitle>Value: {{deal.value}}</ion-card-subtitle>
</ion-card-content>
</ion-card>
</ion-col>
The cards are adjusting in size according to the text content, rather than remaining full-width for each element.