Is it possible to have the ion-cards aligned next to each other rather than in down to down fashion?
I want the cards in horizontal rather in vertical order.
You wrap ion-card in ion-row>ion-col
<ion-row>
<ion-col col-4>
<ion-card>Hello1</ion-card>
</ion-col>
<ion-col col-4>
<ion-card>Hello2</ion-card>
</ion-col>
<ion-col col-4>
<ion-card>Hello3</ion-card>
</ion-col>
</ion-row>
Related
I am tring to build a simple grid in which there is a card i need to show cards by 2x2 format.
<ion-row>
<ion-col *ngFor="let data of dataa" > let assume it will be 10
<ion-card style="width: 200px;">
<img src="assets/imgs/shoe-air.jpg">
<ion-row>
<ion-col>
<ion-badge>Available</ion-badge>
</ion-col>
<ion-col style="text-align: right; font-size: 20px;">
<ion-icon name="heart" color="secondary" ></ion-icon>
</ion-col>
</ion-row>
<ion-button class="offer">{{(2500 - 2000) /2500*100}}%</ion-button>
<p><span class="regular-price" >RS. 2000<span class="special-price"><del> RS. 2500</del></span></span></p>
</ion-card>
</ion-col>
</ion-row>
Its just a template so there is only one card. but when ill fetch data it will be 9 or 8.
I need to show like this
2x2
2x2
2x2
The responsive grid in Ionic is based on a 12 column layout.
If you want to have a 2-column wide (each column takes up 50%) grid, set size=6 on your columns like so:
<ion-grid>
<ion-row>
<ion-col size="6" *ngFor="let data of dataa">
<ion-card>
....
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
I want to vertical center the rows of a grid in a Ionic layout.
I tryed to use css-utilities in this way but it doesn't work:
<ion-content>
<app-auto-logout></app-auto-logout>
<ion-grid justify-content-center align-items-center style="height: 100%">
<ion-row>
<ion-col col-6>
<ion-card text-center padding color="dark" [routerLink]="'/members/recipe'" routerDirection="forward">
<ion-icon src="/assets/images/notepad.svg" class="home-icon"></ion-icon>
</ion-card>
</ion-col>
<ion-col col-6>
<ion-card text-center padding color="dark" [routerLink]="'/drums'" routerDirection="forward">
<ion-icon src="/assets/images/drum.svg" class="home-icon"></ion-icon>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-6>
<ion-card text-center padding color="dark" [routerLink]="'/storage'" routerDirection="forward">
<ion-icon src="/assets/images/storage.svg" class="home-icon"></ion-icon>
</ion-card>
</ion-col>
<ion-col col-6>
<ion-card text-center padding color="dark" (click)='openModal()' routerDirection="forward">
<ion-icon src="/assets/images/warning.svg" class="home-icon"></ion-icon>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Thanks,
Federico.
[EDIT: added screenshot]
This is a screenshot:
How to remove unnecessary padding in ion-item with ion input in ionic-3 ?
<ion-row align-items-center>
<ion-col col-3></ion-col>
<ion-col text-right no-padding col-4.5>
Canister Width <p>(C.W.)</p>:
</ion-col>
<ion-col no-lines ion-item no-padding>
<ion-input></ion-input>
</ion-col>
</ion-row>
You can't remove a padding from item in the tag with the ion-item attribute because it's not the ion-item who has a padding, but the item-inner child who is generated inside.
That's why no-padding doesn't works, but you can simply do this with css like this
.item .item-inner {
padding-left: 0px;
}
Hope this helps.
try this ?
<ion-row align-items-center no-padding>
or you can add <div no-padding>
?
add below code into your css
ion-item{padding:0 !important}
or
you can add inline css in HTML file
<ion-row align-items-center>
<ion-col style="padding:0">
Canister Width <p>(C.W.)</p>:
</ion-col>
</ion-row>
I am using ionic-3 to create a grid layout.
<ion-content>
<ion-row>
<ion-col col-12 col-xl-4 *ngFor="let news of news">
<ion-card>
<ion-card-content>
<img [src]="news.image"/>
<ion-card-title>
{{news.title}}
</ion-card-title>
{{news.text}}
</ion-card-content>
<ion-row>
<ion-col text-right>
<ion-note>
{{news.publish_at}}
</ion-note>
</ion-col>
</ion-row>
</ion-card>
</ion-col>
</ion-row>
</ion-content>
This is resulting in a layout as showed here:
Instead the result I would wish for is:
Which could be described as the default bootstrap method.
What do I need to do to get the preferred layout?
I am learning ionic and i want to align my 3 buttons in left,center and right. i.e. First button in left, second in center and third one in right.
But I don't know how to do it?
Here is My code.
<div>
<button ion-button icon-left>
<ion-icon name="home"></ion-icon>
Left Icon
</button>
<button ion-button icon-only>
<ion-icon name="home"></ion-icon>
</button>
<button ion-button icon-right>
Right Icon
<ion-icon name="home"></ion-icon>
</button>
</div>
Can Anyone guide me with this? As I am a beginner and learning ionic.
You can achieve this using Grid, ionic provide it grid link
It is based on a 12 column layout with different breakpoints based on the screen size.
By default, columns will take up equal width inside of a row for all devices and screen sizes.
<ion-grid>
<ion-row>
<ion-col>
1 of 2
</ion-col>
<ion-col>
2 of 2
</ion-col>
</ion-row>
<ion-row>
<ion-col>
1 of 3
</ion-col>
<ion-col>
2 of 3
</ion-col>
<ion-col>
3 of 3
</ion-col>
</ion-row>
</ion-grid>
Set the width of one column and the others will automatically resize around it. This can be done using our predefined grid attributes. In the example below, the other columns will resize no matter the width of the center column.
<ion-grid>
<ion-row>
<ion-col>
1 of 3
</ion-col>
<ion-col col-8>
2 of 3 (wider)
</ion-col>
<ion-col>
3 of 3
</ion-col>
</ion-row>
<ion-row>
<ion-col>
1 of 3
</ion-col>
<ion-col col-6>
2 of 3 (wider)
</ion-col>
<ion-col>
3 of 3
</ion-col>
</ion-row>
</ion-grid>
So you also can 3 buttons in left,center and right. i.e. First button in left, second in center and third one in right using grid.
<ion-grid>
<ion-row>
<ion-col col-4>
<button ion-button>
First
</button>
</ion-col>
<ion-col col-4>
<button ion-button>
Second
</button>
</ion-col>
<ion-col col-4>
<button ion-button>
Third
</button>
</ion-col>
</ion-row>
</ion-grid>
In Ionic 5 you can also use justify classes
<ion-buttons class="ion-justify-content-center">
<ion-button fill="outline" color="medium">
<ion-icon name="add-outline" slot="icon-only"></ion-icon>
</ion-button>
</ion-buttons>
Ionic React
I adopted the above solutions which were great thanks, but also I needed to get a smaller button right in the middle which the solution below fixes
<IonGrid>
<IonRow>
<IonCol size={"4"} className="ion-align-self-start">
<IonButton expand={"block"} onClick={}>
Left
</IonButton>
</IonCol>
<IonCol size={"4"}>
<p style={{ textAlign: "center", margin: 0 }}>
<IonButton onClick={}> Middle </IonButton>
</p>
</IonCol>
<IonCol size={"4"} className="ion-align-self-end">
<IonButton expand={"block"} onClick={}>
Right
</IonButton>
</IonCol>
</IonRow>
</IonGrid>