I have a login form created with ionic 2 and I want to disable scrolling when keyboard show up, here is the example :
here is the code of htmll login :
<ion-content no-bounce padding style="background:url('assets/imgs/bg.jpg') no-repeat center;background-size:cover;" id="page1">
<div class="header padding text-center">
<img class="logoApp" src="assets/img/logo.png" alt="DoggyDOG" />
</div>
<ion-card>
<ion-card-header>
Login to join DoggyDOG
</ion-card-header>
<ion-card-content>
<form (ngSubmit)="login()" novalidate>
<ion-list no-line>
<ion-item>
<ion-input type="text" placeholder="Username"></ion-input>
</ion-item>
<div class="spacer" style="height:10px;" id="login-spacer2"></div>
<ion-item>
<ion-input type="password" placeholder="Password"></ion-input>
</ion-item>
<div class="spacer" style="height:12px;" id="login-spacer2"></div>
<a>Forgot your login detail? <b>Get help signing in</b></a>
<div class="spacer" style="height:10px;" id="login-spacer2"></div>
<button id="login-button1" ion-button round large color="energized" block icon-left style="font-weight:500;color:#ffffff;">
<ion-icon ios="ios-log-in" md="md-log-in"></ion-icon>
Login
</button>
</form>
<div class="spacer" style="height:10px;" id="login-spacer2"></div>
<button ion-button icon-left block color="facebookbtn">
<ion-icon name="logo-facebook" md="logo-facebook"></ion-icon> Login with Facebook
</button>
<div class="spacer" style="height:2px;" id="login-spacer2"></div>
<button ion-button icon-left block color="googlebtn">
<ion-icon ios="logo-google" md="logo-google"></ion-icon> Login with Google
</button>
</ion-list>
</ion-card-content>
</ion-card>
<button ion-button icon-left block color="light">
<ion-icon ios="ios-person-add" md="md-person-add"></ion-icon> Don't have an account? Sign up
</button>
</ion-content>
can anyone help please to solve this ?
Try this:
#NgModule({
declarations: [
...
],
imports: [
...
IonicModule.forRoot(MyApp,{
scrollPadding: false,
scrollAssist: false
}),
...
],
bootstrap: [IonicApp],
entryComponents: [
...
],
providers: [
...
]
By default for the forms in ios device you will not get the scrolling effect like android. all you have to do is just add the mode of the form.
<form (ngSubmit)="login()" novalidate mode="ios">
hope it helps you to solve this issue
Related
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);
}
}
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 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}}"
i am tryng to show ion items with ion header bar having default ion nav bar.
The problem is, i want ionic bar header in one page rather than ionic nav bar. i tried with below but no luck.
Below from index.html
<ion-nav-bar class="bar-light bar-positive">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
Below from one page:
<ion-view title="items" id="page15" >
<ion-content ng-controller="itemsCtrl" class="has-header" hide-nav-bar="true">
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete"></button>
</div>
items
<div class="buttons">
<button class="button button-icon icon ion-log-out" ng-click="test()">
</button>
</div>
</ion-header-bar>
<ion-list show-delete="data.showDelete" >
<ion-item ng-repeat="item in items"
item="item"
class="item-remove-animate">
{{ item.name }}
<ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(item)">
</ion-delete-button>
</ion-item>
</ion-list>
</ion-content>
<div class="float-button" ng-click="additem()">
<span class="height-fix">
<a class="content">
<i class="ion-ios-plus-empty"> </i>
</a>
</span>
</div>
</ion-view>
The output is coming as below
i dont want the default ion nav bar n that page and want only ionic header bar.
I got it finally. Just add nav bar buttons instead of ionic header bar.
I am creating an app using ionic.
I have some buttons on the menu: messages, Settings, Help and Back.
I would like the back button does not appear on the dashboard page.
Anyone know how I do it? Thanks,
Ps .: I tried to use the ion-nav-back-button, but had some problems.
top menu
This is a menu.html
<ion-side-menus enable-menu-with-back-views="false" >
<ion-side-menu-content>
<ion-nav-bar class="bar-stable bar-balanced">
<ion-nav-buttons side="left">
</ion-nav-buttons>
<ion-nav-buttons side="right">
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
and this is a dashboard.html
<ion-view view-title="">
<ion-content class="padding">
<div class="list">
<div class="row">
<div class="col">
<span>Type your message:</span>
<div class="item-input item-stacked-label">
<textarea type="text"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col">
<span>Choose the distance:</span>
<div class="range range-balanced">
<input type="range" name="distance" min="1" max="10000" value="1000">
</div>
</div>
</div>
<div class="row">
<div class="col">
<span>Anexar imagem:</span>
<button class="button button-balanced button-full">Selecionar</button>
</div>
</div>
<div class="row">
<div class="col">
<a class="button button-icon icon ion-chevron-right float-right"></a>
</div>
</div>
</div>
</ion-content>
</ion-view>
Thanks!
What if you simply use ng-hide="homepage". Set $scope.homepage=true in the Homepage's controller. For other pages it will be undefined and therefore false so it won't be hidden.
dont know this is best way or not but its working for me..!try this.!
add this in controller related to sidemenu:
$scope.$watch(function () {
return $ionicSideMenuDelegate.getOpenRatio();
}, function (value) {
if (($state.$current.name == "app.dashboard")) {
$scope.hideButton = true;
}else{
$scope.hideButton = false;
}
});
html :
other way to do this is..:add whichever button u want in particular view and remove from sidemenu html.
<ion-view view-title="">
<ion-nav-buttons side="right">
</ion-nav-buttons>
<ion-content class="padding">
</ion-content>
</ion-view>
hope , it helps someone.!