I want to be able to create a list of items using *ngFor as follows..
Text - Image
Image-Text
Text - Image
Image-Text
<ion-grid>
<ion-row *ngFor="let item of items">
<ion-col col-6 ">
<ion-card ">
<ion-card-content>{{item.name}}
</ion-card-content>
</ion-card>
</ion-col>
<ion-col col-6 >
<ion-card>
<img [src]="item.img"/>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
However, I am unsure how I could achieve this in a for loop.
Any suggestions? Thanks
Apply flex-direction: row-reverse when the index of the item is odd or even, your choice.
<!--HTML-->
<!--Track the index of each item and apply reverse class if its even or odd (which ever you prefer, just change the comparator)-->
<ion-grid>
<ion-row *ngFor="let item of items; let i = index;" [class.reverse]="i%2 !== 0">
<ion-col col-6>
<ion-card>
<ion-card-content>{{item.name}}
</ion-card-content>
</ion-card>
</ion-col>
<ion-col col-6>
<ion-card>
<img [src]="item.img" />
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
<!--CSS-->
.reverse { flex-direction: row-reverse; }
Related
Can some help format my ionic code in order to look like picture 1?
picture 2 is how it currently looks
here is the code:
<ion-content >
<ion-grid>
<ion-row class="ion-text-center">
<ion-col size="0.9" *ngFor="let c of images; let i = index">
<img src="../assets/cards/cardBackground/cardBackground.png" *ngIf="!c.isFlipped" (click)="selectCard(c)"/>
<img [src]="imageDir + c.name + '.png'" *ngIf="c.isFlipped && !c.isMatched" (click)="selectCard(c)"/>
</ion-col>
</ion-row>
<ion-row class="ion-text-center" >
<ion-col >
<ion-card class="card-class">
<img src="../assets/playIcons/player1.svg"/>
<ion-card-header>
<ion-card-title>{{this.player1["name"]}}</ion-card-title>
<ion-card-title>Score: {{this.player1["score"]}}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
<ion-col >
<ion-card class="card-class">
<img src="../assets/playIcons/player2.svg"/>
<ion-card-header>
<ion-card-title>{{this.player2["name"]}}</ion-card-title>
<ion-card-title>Score: {{this.player2["score"]}}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Im not experienced in frontend as much and would really appreciate help thank you
The easiest solution would be to have a nested grid. eg
<ion-grid>
<ion-row class="ion-align-items-center ion-justify-content-center">
<ion-col size="3">
<ion-card class="card-class">
<img src="../assets/playIcons/player1.svg"/>
<ion-card-header>
<ion-card-title>{{this.player1["name"]}}</ion-card-title>
<ion-card-title>Score: {{this.player1["score"]}}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
<ion-col size="6">
<ion-grid>
<ion-row class="ion-text-center">
<ion-col size="0.9" *ngFor="let c of images; let i = index">
<img src="../assets/cards/cardBackground/cardBackground.png" *ngIf="!c.isFlipped" (click)="selectCard(c)"/>
<img [src]="imageDir + c.name + '.png'" *ngIf="c.isFlipped && !c.isMatched" (click)="selectCard(c)"/>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col size="3">
<ion-card class="card-class">
<img src="../assets/playIcons/player2.svg"/>
<ion-card-header>
<ion-card-title>{{this.player2["name"]}}</ion-card-title>
<ion-card-title>Score: {{this.player2["score"]}}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
You may want to look at breaking down the nested grid's cards into separate rows.
I want to center an element in ionic horizontally with the same margin on the left and right
<div class="tabs-group" class="ion-justify-content-center">
<ion-row>
<ion-col *ngFor="let i of tabsName,let j = index" size="4" (click)="switchToTabs(tabsindicator[j])" [ngClass]="tabs[tabsindicator[j]] ? 'primary-button' : 'secondary-button'">
<ion-grid>
<ion-row>
</ion-row>
<ion-row>
<ion-col>
<b>{{tabsName[j]}} </b>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</div>
ion-justify-content-center ionic CSS class is not applying centering , this is the output :
You have to use ion-justify-content-center on a flexbox node. So either you put display: flex on your wrapper div node, or you just use ion-justify-content-center on <ion-row> like so.
<ion-row class="ion-justify-content-center">
<ion-col>
<b>{{tabsName[j]}} </b>
</ion-col>
</ion-row>
<ion-grid style="height: 100%"> <ion-row justify-content-center align-items-center style="height: 100%; flex-direction: column"> <div text-center> <ion-icon name="images" style="zoom:5.0;" color="medium"></ion-icon> <h4>No Image Found</h4> <p>Looks like there are no converted image available at this moment, Please click <b> <ion-icon name="git-compare" color="medium" style="zoom:2.0;"></ion-icon> </b> button to convert a image</p> </div> </ion-row> </ion-grid>
https://codevampires.com/place-content-horizontally-vertically-in-center-ionic4/
I have an ion-grid and I want the right element to increase its vertical length so it would consume the empty space and has the exact the same vertical length like the two left elements. The only thing I achieved was that the left element increased in horizontal length but this is not what I want to achieve here.
<ion-list>
<ion-card>
<ion-row>
<div class="card-title"> El 1</div>
</ion-row>
</ion-card>
<ion-grid>
<ion-row>
<ion-col>
<ion-card>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
</ion-card>
</ion-col>
</ion-row>
<ion-row >
<ion-col>
<ion-card>
</ion-card>
</ion-col>
<ion-col>
</ion-col>
</ion-row>
</ion-grid>
<ion-list>
For more complex grid layouts than the ones provided by default in ion-grid, you can use CSS-grid-layout -- see docs: Basic Concepts of Grid Layout
For your specific example you would have to set the following:
HTML
<div class="wrapper">
<ion-card class="box1">
<div> box1</div>
</ion-card>
<ion-card class="box2">
<div > box2</div>
</ion-card>
<ion-card class="box3">
<div > box3</div>
</ion-card>
<ion-card class="box4">
<div > box4</div>
</ion-card>
<ion-card class="box5">
<div > box5</div>
</ion-card>
</div>
CSS:
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
}
.box2 {
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 3;
}
Result:
Grid layout screenshot
And of course, now you can easily rearrange or modify all of them by referring to each box's class
And it is a very widely supported featured nowadays (>95%)! https://caniuse.com/#feat=css-grid
However, if you are forced to use ion-grid, one option would be to set two different columns and then occupy the left one with 2 rows, and the right one with 1 row and height set to 100%.
This results in a much more complex and less flexible code, hence I would recommend CSS-layout-grid instead.
To achieve the same result as the image above you would use:
<ion-grid>
<ion-row>
<ion-col>
<ion-row>
<ion-card>
<div> box1</div>
</ion-card>
</ion-row>
<ion-row>
<ion-card>
<div> box2</div>
</ion-card>
</ion-row>
</ion-col>
<ion-col>
<ion-row style="height: 100%;">
<ion-card>
<div> box3</div>
</ion-card>
</ion-row>
</ion-col>
</ion-row>
<ion-row >
<ion-col>
<ion-card>
<div> box4</div>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<div> box5</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
I am trying to center the avatar to the middle, with the code below but it doesn't work.
I have used this class="ion-align-items-center" that i got from the ionic documents but with no successs.
<ion-grid style ="text-align: center">
<ion-row class="ion-align-items-center" >
<ion-col class="ion-align-items-center" *ngFor="let item of students" >
<!-- <div class= "imageHold" >
<ion-img [src]= "profileImage || item.profileImage"></ion-img>
</div> -->
<ion-avatar class="ion-align-items-center">
<ion-img [src]= "profileImage || item.profileImage"></ion-img>
</ion-avatar>
</ion-col>
</ion-row >
<ion-row style ="text-align: center">
<ion-col>
<ion-button size="small" fill="outline" (click)="chooseProfilePic()" >Choose Profile Photo</ion-button>
</ion-col>
</ion-row>
</ion-grid>
I get this result
add a class in the avatar div.
.avatar{
margin: auto;
}
I'm trying to make a gird of 1-row * 2-col as follow:
<ion-grid>
<ion-row *ngFor="let products of productsArray">
<ion-col center text-center col-6 *ngFor="let product of products">
<ion-card (click)="onProductClick(product)">
<ion-badge *ngIf="product.on_sale" class="badge-onSale" item-right>Sale</ion-badge>
<img src="{{product.featured_src}}" />
<ion-card-content>
<ion-card-title style="font-size: 100%">
{{ product.title | StripHTML }}
</ion-card-title>
</ion-card-content>
<ion-row center text-center>
<p style="color: red">
{{ product.price_html | StripHTML:{split:" ",index:0} }}
</p>
</ion-row>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
but due to the difference of each card->content-height the cards/rows , aren't in equal height , how would I tackle that?
I fixed it , by adding these styles to ion-col
.product-col{
display: flex;
justify-content: center;
}
and now it works as intended!