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:
Related
i am using ionic 4 and when the input has focus the keyboard shows and pushes the screen up and i am not able to scroll the html design smash and will not look good
hers the code i am using
<ion-header no-border>
<ion-toolbar>
<ion-row id="progressbar" class="top-bar">
<app-progress [progress]="loadProgress"></app-progress>
</ion-row>
<ion-buttons slot="start">
<ion-back-button class="back-button" *ngIf="back" mode="ios" icon="ios-
arrow-back" color="dark"
(click)="backSlide()"></ion-back-button>
</ion-buttons>
<ion-buttons slot="end" mode="md">
<ion-button class="page-numbering" mode="md">
<span class="first-page-number textBlack">{{pageNumber}}</span><span
class="second-page-number normal">/5</span>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [ngClass]="{'no-padding-div': isIonContent, 'padding-div': !isIonContent}"
force-overscroll="false" fixed="true">
<ion-slides [options]="slideOpts" #slides>
<ion-slide>
<ion-grid id="profileGrid">
<ion-row id="containerRow">
<ion-col no-padding>
<form [formGroup]="profileForm" class="formStyle">
<ion-row id="title-message" class="info-box-profile">
<ion-row class="welcome-title medium" justify-content-center><ion-label></ion-label></ion-row>
<ion-row class="welcome-sbtitle normal" justify-content-center><ion-label></ion-label></ion-row>
</ion-row>
<ion-row id="fname">
<p class="box-titles normal">What’s your first name?</p>
<ion-item mode="md">
<ion-input class="normal" formControlName="First_Name" placeholder="First name" id="name" mode="md"></ion-input>
</ion-item>
</ion-row>
<ion-row id="bday" align-items-start>
<p class="box-titles normal">When is your birthday?</p>
<ion-item mode="md">
<ion-datetime #picker class="normal timePicker" formControlName="Date_Of_Birth" displayFormat="MM/DD/YYYY"
Placeholder="Date of birth" pickerFormat="MM/DD/YYYY" [(ngModel)]="date"
(ionChange)="picktime($event)" mode="md"></ion-datetime>
<ion-icon class="arrow-down-icon" name="ios-arrow-down" slot="end"></ion-icon>
</ion-item>
</ion-row>
<ion-row align-items-start id="gender-title">
<p class="box-titles normal">Which one are you?</p>
</ion-row>
<ion-row id="gender-row" justify-content-center>
<ion-col align-self-center size="6">
<div (click)="female()" class="female" [ngClass]="{'female-image': gender == '', 'female-image1': gender == 'female', 'female-image2': gender == 'male'}">
</div>
</ion-col>
<ion-col align-self-center size="6">
<div (click)="male()" class="male" [ngClass]="{'male-image': gender == '', 'male-image1': gender == 'male', 'male-image2': gender == 'female'}">
</div>
</ion-col>
</ion-row>
<ion-row id="next-button" justify-content-center>
<ion-button class="cta" shape="round" color="secondary" expand="full"
[disabled]="(profileForm.valid) ? false : true" (click)="onClick()">
Next
</ion-button>
<!-- <ion-button class="cta" shape="round" color="secondary" expand="full"
[disabled]="(profileForm.valid && gender != '') ? false : true" (click)="onClick()">
Next
</ion-button> -->
</ion-row>
</form>
</ion-col>
</ion-row>
</ion-grid>
</ion-slide>
<ion-slide>
....
</ion-slides>
</ion-content>
when i click on the first name input the keyboard pushes the screen up and the content smashes, i tried many solution but none of them worked for me
and i also added this in my app.module.ts
IonicModule.forRoot({
mode: 'ios',
scrollAssist: false,
scrollPadding: false,
}),
I'm getting a problem using ion-slides on Ionic 3.
It's using all my screen size, but when i scroll down there is all my stuft and it is ok, but i need those slides be smaller
This is my code:
<ion-header>
<ion-navbar>
<ion-title>
Productos
</ion-title>
<ion-buttons end>
<button (click)="reloadProducts()" style="background:none" ion-button round full large text-center icon-right> <!--(click)="imeiViewer()"-->
<ion-icon name="cart"></ion-icon>
<ion-badge *ngIf="itemInfoHeader.length > 0" id="cart-badge">{{itemInfoHeader.length}}</ion-badge>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides pager>
<ion-slide style="width:100%; height: 50%; " *ngFor="let slide of slide_items" >
<div>
<img src="assets/img/{{slide}}.png">
</div>
</ion-slide >
</ion-slides>
<ion-grid>
<ion-row>
<ion-col col-6>
<button ion-button block icon-start>Filtrar
<ion-icon name="options"></ion-icon>
</button>
</ion-col>
<ion-col col-6>
<button ion-button block icon-end>Ordenar
<ion-icon name="reorder"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let producto of itemInfo">
<ion-item class="item-thumbnail-left" >
<ion-grid>
<ion-row>
<ion-col col-6>
<img src="http://186.176.206.154:8088/images/Products/{{producto.ItemId}}_l_.PNG" >
</ion-col>
<ion-col col-6>
<h3>{{producto.ItemId}}</h3>
<ion-item class="item item-text-wrap">{{producto.ItemName}}</ion-item>
<p style="position:absolute;right:10px;">
<button ion-button (click)="addToCart(producto)" icon-end >
<ion-icon name="cart"></ion-icon>
</button>
</p>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-col>
</ion-content>
if anyone knows how to make my slides "circles" goes up. I tried reducing Height but it doesn't work.
I am using this as guide -> https://ionicframework.com/docs/components/#slides
Fixed! I had to add style="height: 300px;" on ion-slides.
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 using Ionic2 and I want to make design like that:
I made the cart but I can't make the position as image
this is card code:
<ion-grid>
<ion-row wrap>
<ion-col width-50>
<ion-card>
<ion-item>
<ion-icon name="start" item-start></ion-icon>
<ion-icon name="ios-heart-outline" item-end></ion-icon>
</ion-item>
<ion-card-content text-center>
<ion-item text-center>
<img src="http://safe-pay.co/safepay/public/uploadedimg/user/avatar.png" style="width:40px;height:40px" />
</ion-item>
<ion-item>
<span>Canon Power <br/>shot SX60 HS</span>
</ion-item>
<ion-item>
<span id="oldPrice">119.900KD</span>
</ion-item>
<ion-item>
<span id="newPrice">100.900KD</span>
</ion-item>
<ion-item>
<ion-rating [numStars]="5" [readOnly]="false" [value]="3" (clicked)="starClicked($event)">
</ion-rating>
</ion-item>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
this is the output
can any one tell me the how to position them
try putting style to make it aligned as you want ..
<div style="width:100%;float:left;">
<ion-card style="width:33.33%;float:left;">
<ion-card-content text-center>
SAMLE1
</ion-card-content>
</ion-card>
<ion-card style="width:33.33%;float:left;">
<ion-card-content text-center>
SAMLE2
</ion-card-content>
</ion-card>
<ion-card style="width:33.33%;float:left;">
<ion-card-content text-center>
SAMLE3
</ion-card-content>
</ion-card>
</div>
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.