-
-
Save Manduro/bc121fd39f21558df2a952b39e907754 to your computer and use it in GitHub Desktop.
import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core'; | |
import { Keyboard } from '@ionic-native/keyboard'; | |
import { Content, Platform } from 'ionic-angular'; | |
import { Subscription } from 'rxjs/Subscription'; | |
/** | |
* @name KeyboardAttachDirective | |
* @source https://gist.github.com/Manduro/bc121fd39f21558df2a952b39e907754 | |
* @description | |
* The `keyboardAttach` directive will cause an element to float above the | |
* keyboard when the keyboard shows. Currently only supports the `ion-footer` element. | |
* | |
* ### Notes | |
* - This directive requires [Ionic Native](https://github.com/driftyco/ionic-native) | |
* and the [Ionic Keyboard Plugin](https://github.com/driftyco/ionic-plugin-keyboard). | |
* - Currently only tested to work on iOS. | |
* - If there is an input in your footer, you will need to set | |
* `Keyboard.disableScroll(true)`. | |
* | |
* @usage | |
* | |
* ```html | |
* <ion-content #content> | |
* </ion-content> | |
* | |
* <ion-footer [keyboardAttach]="content"> | |
* <ion-toolbar> | |
* <ion-item> | |
* <ion-input></ion-input> | |
* </ion-item> | |
* </ion-toolbar> | |
* </ion-footer> | |
* ``` | |
*/ | |
@Directive({ | |
selector: '[keyboardAttach]' | |
}) | |
export class KeyboardAttachDirective implements OnInit, OnDestroy { | |
@Input('keyboardAttach') content: Content; | |
private onShowSubscription: Subscription; | |
private onHideSubscription: Subscription; | |
constructor( | |
private elementRef: ElementRef, | |
private keyboard: Keyboard, | |
private platform: Platform | |
) {} | |
ngOnInit() { | |
if (this.platform.is('cordova') && this.platform.is('ios')) { | |
this.onShowSubscription = this.keyboard.onKeyboardShow().subscribe(e => this.onShow(e)); | |
this.onHideSubscription = this.keyboard.onKeyboardHide().subscribe(() => this.onHide()); | |
} | |
} | |
ngOnDestroy() { | |
if (this.onShowSubscription) { | |
this.onShowSubscription.unsubscribe(); | |
} | |
if (this.onHideSubscription) { | |
this.onHideSubscription.unsubscribe(); | |
} | |
} | |
private onShow(e) { | |
let keyboardHeight: number = e.keyboardHeight || (e.detail && e.detail.keyboardHeight); | |
this.setElementPosition(keyboardHeight); | |
}; | |
private onHide() { | |
this.setElementPosition(0); | |
}; | |
private setElementPosition(pixels: number) { | |
this.elementRef.nativeElement.style.paddingBottom = pixels + 'px'; | |
this.content.resize(); | |
} | |
} |
Updated version for ionic 4 and cordova-plugin-ionic-keyboard (https://github.com/driftyco/ionic-plugin-keyboard is deprecated)
https://gist.github.com/Youness-e/5c4f49f3aaa4ee90f45b75818764114d
Don't forget to install https://github.com/ionic-team/cordova-plugin-ionic-keyboard
ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install @ionic-native/keyboard
and include the directive on your page.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { KeyboardAttachDirective } from 'src/app/directives/keyboard-attach.directive'; // Adapt the path
...
@NgModule({
imports: [
...
],
declarations: [XxxxxPage, KeyboardAttachDirective]
})
export class XxxxxPageModule {}
What about ionic 5? This is not working and capacitor
any example for ionic 4 ?
any example for ionic 4 ?
Hello, were you able to figure out it for ionic 4? I have some troubles.
Thanks
Hello, any working solution on capacitor (Ionic 5)?
@alfredcarro @josedejesusAmaya @ipehimanshu @Jonatthu
Ionic 5 quickfix for components that return HtmlElement (ion-alert, ion-popover, etc...)
My Fix on this was adding a hide and show when the user clicks on the input.
isPlatform('ios') && isShow <>content that overlaps</>
by this the overlap content hides whenever the user click the input and show when the user leaves the input by clicking the screen.
Thanks a lot @prescindivel let me try out