keyboard issue between ion-footer and header

Resources:
Before submitting an issue, please consult our troubleshooting guide (http://ionicframework.com/docs/troubleshooting/) and developer resources (http://ionicframework.com/docs/developer-resources/)

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ ] 3.x

I'm submitting a ... (check one with "x")
[ ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

In my case, i have a messaging page, having ion-footer at the bottom. Footer have an ion-textarea and a SEND button inside. When we focus inside textarea, the keyboard comes up ,the footer float above the keyboard , also the header goes up out of the screen . But if i set "this.keyboard.disableScroll(true) " , the keyboard comes up hiding the footer beneath, that's prevent the header goes up out of the screen.

Expected behavior:

When keyboard comes up , the footer should appear above the keyboard, also header should be fixed at the top of the screen.

Steps to reproduce:

Related code:

insert any relevant code here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/Users/melody/Documents/sns_mobile_terminal/gzyx-sns/node_modules)

@ionic/cli-utils  : 1.8.0
ionic (Ionic CLI) : 3.8.0

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.6.0

System:

ios-deploy : 1.9.1 
ios-sim    : 6.0.0 
Node       : v8.1.1
npm        : 5.3.0 
OS         : OS X El Capitan
Xcode      : Xcode 8.0 Build version 8A218a

insert the output from ionic info here

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having? Thanks for using Ionic!

@kensodemann

@kensodemann Ha! Here is the printscreen of my application. How can i prevent the header goes up out of the screen.

@kensodemann

@kensodemann

Thank you for the updated information. I duplicated this issue in an existing sample application that I have.

This appears to be a duplicate of #5432 and #12452. #5432 obviously makes this a long standing issue that we have not been able to fully solve for various reasons. However, the comments in that issue contain several work arounds that you may find helpful. Have a look in there and see if any of that works for you.

I am going to leave this open as something to look into after the Ionic v4 release is complete.

I had some apps running ionic 3.3, after upgrading to 3.6.1 they now have same issue.

Easy to reproduce just create blank starter app, then add a ion-textarea and set its height to larger than available space such as
textarea {
height: 80vh;
}
then when you tap into the textarea it scrolls header off screen.
With version 3.3 of ionic it seemed to flash for a second and then reposition the header back, now it does not.

As I workaround I created this directive "keyboardfix" (add to ion-content tag) that resets the window scroll position after keyboard is displayed (on ios). This results in the header dropping back down into view, not pretty, but better than user loosing access to the header/toolbar buttons. This is what seemed to happen before upgrading to ionic 3.6.

import { Directive, OnDestroy, OnInit } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';
import { Subscription } from 'rxjs/Subscription';
import { Content, Platform } from 'ionic-angular';

@Directive({
    selector: '[keyboardfix]'
})
export class KeyboardFix implements OnInit, OnDestroy {
    private onShowSubscription: Subscription;

    constructor(
        private keyboard: Keyboard,
        private platform: Platform
    ) { }

    ngOnInit() {
        if (this.platform.is('cordova') && this.platform.is('ios')) {
            this.onShowSubscription = this.keyboard.onKeyboardShow()
                .subscribe(e => this.onShowKeyboard(e));
        }
    }

    ngOnDestroy() {
        if (this.onShowSubscription) {
            this.onShowSubscription.unsubscribe();
        }
    }

    private onShowKeyboard(e) {
        setTimeout(() => {
            window.scrollTo(0, 0);
        }, 10);
    }
}

I tried this approach but no solution. I have the exact same problem

Having similar issue. With ionic-angular 3.7.1, the entire screen moves up when ionic-native keyboard shows (from a ion-textarea input).

`global packages:

@ionic/cli-utils : 1.5.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.5.0

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.3.0 ios 4.4.0
Ionic Framework    : ionic-angular 3.7.1

System:

Node       : v7.10.1
OS         : macOS Sierra
Xcode      : Xcode 9.0 Build version 9A235 
ios-deploy : 1.9.2 
ios-sim    : 6.0.0 
npm        : 4.2.0 `

on all iOS devices. for Android works fine

Any news?

i got no problem with ios 10.3 but after xcode update i got ios 11 and my header and footer dissappear after keyboard shown and closed

I'm having this issue - any solution to this?

having the same issue - would be nice to get a fix to this

@richardshergold

@richardshergold We can resolve it with creating a cordova plugin. if the platform is 'iOS',build the program , modifying the iOS plugin, and then present the native controller to resolve the issue

@aslaugsollilja

@aslaugsollilja @pe1o2pl @polfernandez @sjdrew

Did anybody find any actual workaround (that does not hide the input behind keyboard)?

Really looking a solution for this problem my chat application is not looking standard with keyboard issue. :(

Me too, especially that there is no hardware back button on iphone.
With header out of screen there is no way back from the page, only by killing the app!

Hi,

Maybe you can try this directive https://gist.github.com/Manduro/bc121fd39f21558df2a952b39e907754

Hi,
I have the same issue, any progress or workaround on this issue yet?

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

Issue moved to: ionic-team/ionic-v3#887

Navigation Menu

Repository navigation

keyboard issue between ion-footer and header #12844

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

keyboard issue between ion-footer and header #12844

Description

Activity

kensodemann commented on Sep 8, 2017

qcheng2 commented on Sep 11, 2017

qcheng2 commented on Sep 11, 2017

kensodemann commented on Sep 13, 2017

sjdrew commented on Sep 27, 2017

sjdrew commented on Sep 27, 2017

polfernandez commented on Oct 25, 2017

BluebambooSRL commented on Oct 26, 2017

anhiliate commented on Nov 1, 2017

1 remaining item

richardshergold commented on Nov 24, 2017

aslaugsollilja commented on Nov 24, 2017

qcheng2 commented on Nov 29, 2017

qcheng2 commented on Nov 29, 2017

dennis3001 commented on Mar 5, 2018

nits-ravis commented on Mar 14, 2018

dennis3001 commented on Mar 14, 2018

Kira2 commented on Mar 15, 2018

alimardani commented on May 11, 2018

ionitron-bot commented on Dec 8, 2018

ionitron-bot commented on Dec 8, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions