Move all content above keyboard

cgathergood · July 3, 2015, 10:58am

Hey guys,

So I’m working on a chat app, and I would like the most recent chat to appear when the software keyboard is open. On both Android and iOS the keyboard simply overlays the entire element. The user has to scroll up to see the most recent message

I’m using keyboard attach to move my input footer up with the keyboard, is there a similar directive to move the whole content above the keyboard. Let me know if you require any more information.

Here’s a gif of my problem: http://makeagif.com/i/K1O4HN

Cheers!

ibaiapellaniz · July 7, 2015, 12:26pm

You could try to call $ionicScrollDelegate.scrollBottom(); on focus on the text area? You might need to resize the scroll after keyboard is done opening and before scrolling tho.

jourdan · November 12, 2016, 2:48am

I had a problem with this for Ionic 2 but was able to come up with a solution that was really easy, for anyone with the same issue, feel free to check my solution out, it should work for any Ionic 2 page:

gist.github.com

https://gist.github.com/jourdan-jobox/ca632e15f43e8f5860a369d3e019fa33

conversation.ts

import { Platform }     from 'ionic-angular';
import { Keyboard }     from 'ionic-native';
import { Subscription } from 'Rxjs/rx';

@Component({
  selector:    'page-conversation',
  templateUrl: 'conversation.html'
})
export class ConversationPage {
  @ViewChild(Content) content:  Content;

This file has been truncated. show original

Topic		Replies	Views
Content moves up using keyboard-attach ionic-v1	0	730	May 6, 2016
How to allow the content to scroll above the input box control by the keyboard? ionic-v1	0	965	December 22, 2016
How to push ionic content above keyboard Ionic Native	1	716	June 6, 2019
Android keyboard-attach footer overlap the content when keyboard appear	1	2022	September 19, 2017
Input focus scroll up above keyboard ionic-v3	1	1028	October 31, 2016

Move all content above keyboard

Related topics