Ionic 2 Keyboard becomes slow when typing - javascript

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>

Related

How to make ion-element float on ion-header

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

ionic3 footer with ion-tabs

I want to make a common footer for all the pages , the footer have 5 buttons,
the first one is selected by default and this one or the page opened by the first button have three tabs, i made the three tabs and everything fine,but i don't know how to add the footer? should i add it on every single page? (there will be a lot of repetition) any idea ?
the ion-tabs it not appear on all pages as i want because i add on app.module.ts
tabsHideOnSubPages: true
<ion-tabs [selectedIndex]="mySelectedIndex"
name="mainTabs"
tabsPlacement="top"
tabsLayout="icon-hide"
tabsHighlight="true"
[ngClass]="showTabs? 'appear-tabs':'disappear-tabs'">
<ion-tab [root]="exploreRoot" tabTitle="A"></ion-tab>
<ion-tab [root]="spotlightRoot" tabTitle="B"></ion-tab>
<ion-tab [root]="webinarsRoot" tabTitle="C"></ion-tab>
</ion-tabs>
footer:
<ion-footer>
<ion-toolbar>
<ion-buttons>
<!--Main-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-home"></ion-icon>
<label class="title-icon-footer">AAA</label>
</div>
</button>
<!--my Programs-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="ios-play"></ion-icon>
<label class="title-icon-footer">BBB</label>
</div>
</button>
<!--my webinars-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-desktop"></ion-icon>
<label class="title-icon-footer">CCC</label>
</div>
</button>
<!--my notification-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-notifications"></ion-icon>
<label class="title-icon-footer">CCC</label>
</div>
</button>
<!--my account-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-person"></ion-icon>
<label class="title-icon-footer">DDD</label>
</div>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
I wanted to do the same and ended up not using tabs and created a footer component that I included on every page. I passed the navController from the page to the footer so the footer could navigate to pages.
On every page .html
<ion-footer>
<my-footer [navController]="navController"></my-footer>
</ion-footer>
Footer component .html
<ion-grid no-padding>
<ion-row align-items-center>
<ion-col col-6 text-center>
<button ion-button icon-only (click)="gotoPage('HomePage')">
<ion-icon name="md-apps"></ion-icon>
<span>Home</span>
</button>
</ion-col>
<ion-col text-center>
<button ion-button icon-only (click)="gotoPage('ContactPage')">
<ion-icon name="md-list-box"></ion-icon>
<span>Contact</span>
</button>
</ion-col>
</ion-row>
</ion-grid>
Footer component .ts
import { Component, Input } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'mwc-footer',
templateUrl: 'mwc-footer.html'
})
export class MwcFooterComponent {
#Input('navController') navController;
constructor() { }
public gotoPage(page: string): void {
this.navController.setRoot(page);
}
}

Change icon by selecting icon from list

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

Ionic 2 Infinite Scroll event never fires

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>

Input elements not scrolling

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

Categories