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?
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:
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>
Ionic seems to be adding a <div class='fixed-content'> and <div class='scroll-content'> to my view and it's creating double margins. It seems to just add a lot of content and I'm assuming I can control it, I just don't know how.
Why would that happen?
my html:
<ion-content>
<ion-grid>
<ion-row>
<ion-col >
<ion-card>
<ion-card-content>
<img [src]="client.get_image.before_front_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<img [src]="client.get_image.before_side_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<img [src]="client.get_image.after_front_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<img [src]="client.get_image.after_side_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
rendered content:
<ion-content class="content content-md">
<!-- DOUBLE MARGIN... WHY?! -->
<div class="fixed-content" style="margin-top: 56px; margin-bottom: 61px;"></div>
<div class="scroll-content" style="margin-top: 56px; margin-bottom: 61px;">
<ion-grid class="fill-height grid">
<ion-row class="row">
<ion-col class="col">
<ion-card class="card card-md">
<ion-card-content class="card-content card-content-md">
<img src="http://awaken180-assets.s3.amazonaws.com/clients/before_fronts/000/000/067/original/marty.jpg?1490189112">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col class="col">
<ion-card class="card card-md">
<ion-card-content class="card-content card-content-md">
<img src="../assets/newred_newblue_outline.png">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col class="col">
<ion-card class="card card-md">
<ion-card-content class="card-content card-content-md">
<img src="../assets/newred_newblue_outline.png">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col class="col">
<ion-card class="card card-md">
<ion-card-content class="card-content card-content-md">
<img src="../assets/newred_newblue_outline.png">
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
Yes, Ionic2 adds both fixed-content and scroll-content.
The fixed-content as the name says it's the content on the page that is fixed, if it's adding both margin to top and bottom it's because you have a header and a footer on this page, and it adds exactly the amount of px it's needed to leave the space for your header and footer on your device. So if you check on a device it may be 36px, on anothe it's 72px. If you want to test, remove the footer or header and check again, it'll not have margin top or bottom.
The scroll-content is where the scrollable content is, in this case, your ion-content. Everything inside ion-content is scrollable and added on scroll-content.
You can force css to it (i use the fixed-content class to add a non-scrollable background image to some projects), but it's not something nice to do because it'll make your content on the page go up, so if you have content right bellow the header it may be initialized behind the header.
So that's why Ionic2 creates these classes, it's just to ensure that your scrollable content goes right where it needs to be.
I've been facing this challenge now, my grid is not scrolling when the app is install on the phone, but I do scroll on the ionic lab on my system.
I was thinking it has to do with CSS, I've added a lot of styles, overflow : scroll and some tweaks but still behaving the same way, and I've also spend a whole lot of time getting this buddy smiling, but it still doesn't work.
This is my code.
<ion-navbar *navbar>
<ion-toolbar>
<ion-buttons start>
<button (click)="NewPostPage()" primary>
<ion-icon name="add" class="icon-color"></ion-icon>
</button>
</ion-buttons>
<ion-title>Posts</ion-title>
<ion-buttons end>
<button (click)="ProfilePage()" primary>
<ion-icon name="person" class="icon-color"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button (click)="SettingPage()" primary>
<ion-icon name="settings" class="icon-color"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-navbar>
<ion-content>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content primary></ion-refresher-content>
</ion-refresher>
<ion-grid style="overflow: scroll !important;">
<ion-row>
<ion-col width-50>
</ion-col>
<ion-col width-50>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50>
</ion-col>
<ion-col width-50>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50>
</ion-col>
<ion-col width-50>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50>
</ion-col>
<ion-col width-50>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50>
</ion-col>
<ion-col width-50>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50>
</ion-col>
<ion-col width-50>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50>
</ion-col>
<ion-col width-50>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50>
</ion-col>
<ion-col width-50>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50>
</ion-col>
<ion-col width-50>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<button *ngIf="fabCore1" fab fab-bottom fab-right (click)="Stylist()" class="fab-core-2" fab-core-color-1>
<ion-icon name="radio-button-off"></ion-icon>
</button>
<button *ngIf="fabCore2" fab fab-bottom fab-right (click)="Chat()" class="fab-core-1" fab-core-color-2>
<ion-icon name="chatboxes" style="margin-top: 4px;font-size: 22px;"></ion-icon>
</button>
<button fab fab-bottom fab-right (click)="ToggleHide()" primary>
<ion-icon name="more"></ion-icon>
</button>
maybe you should use <ion-col col-6>, not <ion-col width-50>? Maybe that causes a scroll problem.