I have an ion-footer in my application in Ionic, but I am having a problem where the footer gets pushed up each time the keyboard comes out. I have added the:
Config XML
<preference name="KeyboardResize" value="false" />
<preference name="KeyboardResizeMode" value="ionic" />
<ion-footer class="ion-no-border" slot="fixed">
<ion-grid class="footer-tab">
<ion-row justify-content-around>
<ion-col>
<ion-button expand="block" fill="clear" [routerLink]="['/inicio']">
<ion-icon color="medium" name="home"></ion-icon>
</ion-button>
Início
</ion-col>
<ion-col>
<ion-button expand="block" fill="clear" [routerLink]="['/extrato']">
<ion-icon color="medium" name="list"></ion-icon>
</ion-button>
Abastecimento
</ion-col>
<ion-col>
<ion-button expand="block" fill="clear" [routerLink]="['/indicacoes']">
<ion-icon color="medium" name="happy"></ion-icon>
</ion-button>
Indique
</ion-col>
<ion-col>
<ion-button expand="block" fill="clear" [routerLink]="['/rede']">
<ion-icon color="success" name="pin"></ion-icon>
</ion-button>
Postos
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
CSS
.footer-tab {
font-size: 12px;
text-align: -webkit-center;
margin-top: -11px;
margin-bottom: 2vh;
color: grey;
}
[Screenshot keyboard pushes to up]
https://i.stack.imgur.com/ORiA2.jpg
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 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'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 would like to have an ion-item inside a list with a word centered between two icons (one on left side and one on right side) like this:
I'm not able to achieve this goal, because I have something like that:
This is my code:
<ion-list>
<ion-item class="item item-icon-left item-icon-right" style="text-align: center">
<ion-icon item-left name="lock"></ion-icon>
<b>Woman</b>
<ion-icon item-right name="lock"></ion-icon>
</ion-item>
How can I have something like in the first image where the text it's centered correctly?
You can use text-align property for center your text like below
<ion-list>
<ion-item class="item item-icon-left item-icon-right" style="text-align: center">
<ion-icon item-left name="lock"></ion-icon>
<ion-label class="centerlabel">Woman</ion-label>
<ion-icon item-right name="lock"></ion-icon>
</ion-item>
SCSS
.centerlabel {
text-align: center;
}
Hope this will helps!
(Posted solution on behalf of the question author).
<ion-list>
<ion-item>
<ion-row>
<ion-col col-1 style="text-align: left;">
<ion-icon name="lock"></ion-icon>
</ion-col>
<ion-col col-10 style="text-align: center;">
<b>Woman</b>
</ion-col>
<ion-col col-1 style="text-align: right;">
<ion-icon name="lock"></ion-icon>
</ion-col>
</ion-row>
</ion-item>
</ion-list>
try this
<ion-list>
<ion-item >
<ion-icon item-left name="lock"></ion-icon>
<div text-center><b style="margin-left: -20px;">Woman</b></div>
<ion-icon item-right name="lock"></ion-icon>
</ion-item>
</ion-list>
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>