Html Question posted in
Some basic documentation can be found here.

Html – I am trying to display two columns within a row in my ionic/angular project. the its just creating a stack where the other content is in the bottom

I am trying to display two columns within a row in my ionic/angular project. the its just creating a stack where the other content is in the bottom.
this is also my css

    <ion-grid class="rewards-container" *ngIf="!noRewardsData">
         <ion-row class="row-container">
           <ng-container *ngFor="let category of categories">
             <ion-col size="6" class="reward-item" *ngIf="contentVisibility[category.value] && getRewardsByCategory(category.value).length > 0">
               <ion-card class="reward-card" *ngFor="let item of getRewardsByCategory(category.value); let i = index" (click)="selectedReward(item)">
                 <div>
                   <img class="reward-image" [src]="item.imageUrl" (error)="$event.target.src = defaultImg">
                 </div>
                 <div class="reward-details">
                   <div class="reward-name">{{item.name}}</div>
                   <div class="reward-cost">{{item.points}}</div>
                 </div>
               </ion-card>
             </ion-col>
           </ng-container>
         </ion-row>
       </ion-grid>
Tags:

2

Answers


  1. 0

    I am unable to replicate the issue since you have not shared all the code needed, please find below working example for your reference!

    html

    <ion-grid class="rewards-container">
  <ion-row>
    <ng-container *ngFor="let category of categories">
      <ion-col size="6" class="reward-item">
        <ion-card
          class="reward-card"
          *ngFor="let item of categoriesData; let i = index"
        >
          <div>
            <img class="reward-image" [src]="item.imageUrl" />
          </div>
          <div class="reward-details">
            <div class="reward-name">{{ item.name }}</div>
            <div class="reward-cost">{{ item.points }}</div>
          </div>
        </ion-card>
      </ion-col>
    </ng-container>
  </ion-row>
</ion-grid>

    ts

    import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
})
export class ExampleComponent {
  categories = ['A', 'B'];
  categoriesData = [
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
  ];
}

    stackblitz

    Login or Signup to reply.
  2. 0

    Copy and paste your code into the Code sample pre code area when you click on the {} button.

    You can use "unminify" site to indent the code.
    https://unminify.com
    The Tab size would be 1. Paste your code there and click on the Unminify button.
    Now use the Copy button then paste at the stackoverflow into the Code sample pre code area when you click on the {} button.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search