Ionic 2 input elements not scrolling to top when keyboard is shown. I have tried everything that i could find on google. making sure keyboard disable scroll is not true. But still couldn't figure it out what makes the scroll not working.
Any advice would be helpful. Thank you.
Code:
<ion-header>
<ion-navbar color="header">
<ion-title>Billing Info</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list style="padding: 10px 15% 10px 15%">
<ion-item *ngFor="let item of cart.Food">
{{item.Food}}
<div item-right>₹ {{item.Qty*item.Price}}</div>
</ion-item>
</ion-list>
<ion-item (click)="toggleGroup(i)" style="padding: 10px 15% 10px 15%; font-size: large">
Net Total
<div item-right>₹ 150
<ion-icon color="success" [name]="isGroupShown(i) ? 'arrow-dropdown' : 'arrow-dropright'"></ion-icon>
</div>
</ion-item>
<ion-list *ngIf="isGroupShown(i)" style="padding: 10px 15% 10px 15%" [ngClass]="{active: isGroupShown(i)}">
<ion-item>
Bill Amount
<div item-right>₹ 150</div>
</ion-item>
...
</ion-list>
<ion-item style="padding: 10px 15% 10px 15%">
<ion-label>Discounts</ion-label>
<ion-checkbox item-right color="secondary" [(ngModel)]="discount" checked="false"></ion-checkbox>
</ion-item>
<ion-grid style="padding: 10px 15% 10px 15%; background-color: #f0e68c" radio-group [(ngModel)]="type">
<ion-row>
<ion-col col-6>
<ion-item>
<ion-label>Percentage</ion-label>
<ion-radio value="percentage" checked item-right></ion-radio>
</ion-item>
</ion-col>
<ion-col col-6>
<ion-item>
<ion-label>Amount</ion-label>
<ion-radio value="amount"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<ion-list>
<ion-item>
<ion-label floating>Unit</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Reason</ion-label>
<ion-textarea rows="5"></ion-textarea>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<button ion-button>Apply</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer text-center>
<ion-toolbar position="bottom">
<button ion-button color="cart" round large outline>BILL</button>
</ion-toolbar>
</ion-footer>
Screenshot:
There is a topic for this kind of issue on ionic forum. Did You read it?
There are workarounds like those:
Using a regular <input type="text"> instead of <ion-input type="text">
Using some custom directive to make element "attached" to keyboard: https://gist.github.com/Manduro/bc121fd39f21558df2a952b39e907754
Related
I want to make the icon goes between the header and content section
but its keep going UNDER the header section..
This is the result I get:
my html code
<ion-header >
<ion-toolbar class="header">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title class="app-title" text-center>My app</ion-title>
</ion-toolbar>
<ion-toolbar class="header">
<ion-row>
<ion-col text-center routerLink="/mails-to-sign">
<p class="stat-title">Courriers à signer</p>
</ion-col>
<div class="verticalLine"></div>
<ion-col text-center routerLink="/action">
<p class="stat-title"> Actions à réaliser </p>
</ion-col>
<div class="verticalLine"></div>
<ion-col text-center routerLink="/refused-mails"></p>
<p class="stat-title">Courriers transmit</p>
</ion-col>
</ion-row>
</ion-toolbar>
<ion-content>
<ion-icon class="add-mail-btn" color="success" name="add-circle"></ion-icon>
</ion-content>
My css
.add-mail-btn{
font-size: 60px;
position: absolute;
top: -5%;
left: 79%;
}
Looks like you're looking for the ion-fab component:
<ion-content>
<!--
fab placed to the top and end and on the top edge
of the content overlapping header
-->
<ion-fab vertical="top" horizontal="end" edge slot="fixed">
<ion-fab-button>
<ion-icon name="person"></ion-icon>
</ion-fab-button>
</ion-fab>
...
</ion-content>
Please notice that the position of the button is achieved by using the following properties: vertical="top" horizontal="end" edge
Brief Explanation:
I have placed 1 icon on home.html and I have some a list of icons as well. I just want to replace the icon with the icon I choose from the list. Below is my home.html code
<ion-item>
<!--Replace below icon by selecting icon from below ion-list -->
<i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
</ion-item>
<ion-list>
<ion-item>
<i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
</ion-item>
<ion-item>
<i class="fa fa-battery-1"></i> Battery Level 1
</ion-item>
<ion-item>
<i class="fa fa-battery-2"></i> Battery Level 2
</ion-item>
<ion-item>
<i class="fa fa-battery-3"></i> Battery Level 3
</ion-item>
<ion-item>
<i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
</ion-item>
</ion-list>
I have to use DOM sanitizer for some HTML dynamic operations, it will be ok if this needs JS/jQuery way on home.ts side.
Component Side :
battery_level = 'empty'
Template Side :
<ion-item>
<i class="fa fa-battery-{{battery_level}}"
[ngStyle]="{'color': battery_level=='empty' ? 'red' : battery_level=='4' ? 'green' : 'black' }"
></i> Battery Level {{battery_level}}
</ion-item>
<ion-list>
<ion-item (click)='battery_level = "empty"'>
<i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
</ion-item>
<ion-item (click)='battery_level = "1"'>
<i class="fa fa-battery-1"></i> Battery Level 1
</ion-item>
<ion-item (click)='battery_level = "2"'>
<i class="fa fa-battery-2"></i> Battery Level 2
</ion-item>
<ion-item (click)='battery_level = "3"'>
<i class="fa fa-battery-3"></i> Battery Level 3
</ion-item>
<ion-item (click)='battery_level = "4"'>
<i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
</ion-item>
</ion-list>
WORKING DEMO
I'm trying to use ionic's infinite scroll. However, no matter what I do I can't get this working. Also, there example makes no sense to me what so ever.
I have this page I'm using to import messages:
<astoot-layout [pageName]="pageName" [basePage]="this">
<ion-content padding-horizontal padding class="messages-page-content">
<!--<ion-scroll scrollY="true" class="messages">-->
<ion-list>
<ion-item *ngFor="let message of messages">
<!--<div *ngFor="let message of messages" class="day-wrapper">-->
<div [class]="'message message-' + getOwnerClassPrefix(message.senderUserId)">
<div class="message-content message-content-text">{{message.messageText}}</div>
<span class="message-timestamp">{{ getCreated(message.created) }}</span>
</div>
<!--</div>-->
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="pullPage($event)">
<ion-infinite-scroll-content>
</ion-infinite-scroll-content>
</ion-infinite-scroll>
<!--</ion-scroll>-->
</ion-content>
<ion-footer>
<ion-toolbar color="whatsapp" class="messages-page-footer" position="bottom">
<ion-input [(ngModel)]="messageText" class="message-editor" placeholder="Type a message"></ion-input>
<ion-buttons end>
<button ion-button icon-only *ngIf="messageText" class="message-editor-button" (click)="sendTextMessage()">
<ion-icon name="send"></ion-icon>
</button>
<button ion-button icon-only *ngIf="!messageText" class="message-editor-button">
<ion-icon name="mic"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
</astoot-layout>
This is my pullPage Method which is never called:
pullPage(infiniteScroll: any) {
//TODO Get nextPage
setTimeout(() => {
this.baseProvider.getList(this.filterByConversationId).subscribe(entities => {
this.messages.concat(entities);
infiniteScroll.complete();
});
}, 500);
}
just incase its needed here is my layout component:
<ion-header>
<ion-navbar align-title="center">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title> {{pageName}} </ion-title>
<ion-buttons end>
<button [hidden]="!editOptions || editOptions.isEditing" (click)="toggleEdit()" ion-button>
<ion-icon name="create"></ion-icon>
Edit
</button>
<button [hidden]="!editOptions || !editOptions.isEditing" class="success" (click)="save()" ion-button>
<ion-icon name="save"></ion-icon>
Save
</button>
<button [hidden]="!editOptions || !editOptions.isEditing" class="warn" (click)="toggleEdit()" ion-button>
<ion-icon name="save"></ion-icon>
Cancel
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ng-content>
</ng-content>
I'm generally confused on how ion-infinite-scroll even works how does it know when to signal, is it just based on the closest list above it?
How can I get the infinite scroll event to fired?
For anyone who is encountering something similar, the problem is an open issue with ionic caused by the nested ion-content, Luckily in my case I could remove it
My messages page now call the component with out wrapping the content:
<astoot-layout [pageName]="pageName" [basePage]="this"></astoot-layout>
My layout page now looks like this:
<ion-header>
<ion-navbar align-title="center">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title> {{pageName}} </ion-title>
<ion-buttons end>
<button [hidden]="!editOptions || editOptions.isEditing" (click)="toggleEdit()" ion-button>
<ion-icon name="create"></ion-icon>
Edit
</button>
<button [hidden]="!editOptions || !editOptions.isEditing" class="success" (click)="save()" ion-button>
<ion-icon name="save"></ion-icon>
Save
</button>
<button [hidden]="!editOptions || !editOptions.isEditing" class="warn" (click)="toggleEdit()" ion-button>
<ion-icon name="save"></ion-icon>
Cancel
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
I have been having issues with typing into textarea on android, The keyboard becomes slow when typing. I don't seem to know why that happening as I am not running any code on each keyPress/Input.
Below is my html code for the textarea
<ion-footer>
<ion-grid class="input-wrap">
<ion-row>
<ion-col col-10>
<ion-list no-lines>
<ion-item>
<ion-textarea #chatInput placeholder="Type a message" (keyup.enter)="sendMessage(chatInput)" [(ngModel)]="messageField"></ion-textarea>
</ion-item>
</ion-list>
</ion-col>
<ion-col col-2>
<button [disabled]="messageField == ''" ion-button clear icon-only item-right (click)="sendMessage(chatInput)">
<ion-icon name="ios-send" ios="ios-send" md="md-send"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
Any idea about solving this will be appreciated.
I was facing same issue. I tried using textarea instead and it solved my problem:
<ion-footer>
<ion-grid class="input-wrap">
<ion-row>
<ion-col col-10>
<ion-list no-lines>
<ion-item>
<textarea #chatInput placeholder="Type a message" (keyup.enter)="sendMessage(chatInput)" [(ngModel)]="messageField"></textarea>
</ion-item>
</ion-list>
</ion-col>
<ion-col col-2>
<button [disabled]="messageField == ''" ion-button clear icon-only item-right (click)="sendMessage(chatInput)">
<ion-icon name="ios-send" ios="ios-send" md="md-send"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
i made a filter for my ionic app that work very well on google chrome (whit the ionic serve) but when i build my apk it doesnt do anything what could be the problem?
this is the search code
<ion-content class="fondo has-subheader">
<div class="bar subheader item-input-inset bar-light">
<label class="item-input-wrapper">
<input type="search" ng-model="busqueda" placeholder="Buscar">
</label>
</div>
<ion-list>
<ion-item class="button button-icon center" ng-repeat="cate in categorias | filter: busqueda" type="item-text-wrap" href="#/tab/categoria/{{cate.id}}" >
<img class="img_cat" ng-src="{{cate.imagen}}" >
<h2 class="categoria_n">{{cate.nombre}}</h2>
</ion-item>
</ion-list>
</ion-content>
<ion-content class="fondo has-subheader">
<div class="bar subheader item-input-inset bar-light">
<label class="item-input-wrapper">
<input type="text" ng-model="search" placeholder="Buscar">
</label>
</div>
<ion-list>
<ion-item class="button button-icon center" ng-repeat="cate in categorias | filter : search" type="item-text-wrap" href="#/tab/categoria/{{cate.id}}" >
<img class="img_cat" ng-src="{{cate.imagen}}" >
<h2 class="categoria_n">{{cate.nombre}}</h2>
</ion-item>
</ion-list>
</ion-content>
And try ui-sref in replace of href="#/tab/categoria/{{cate.id}}"