Ionic 2 On-Screen Keyboard Covers Focused Input Element Inside Grid Component

[mikelunn]

Ionic version: (check one with "x")
[ ] 1.x
[x ] 2.x

I'm submitting a ... (check one with "x")
[ 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:
The onscreen keyboard covers the input element that has focus when used within the grid component.

Expected behavior:
Given an ion-grid component and a series of ion-row and ion-col components. When an ion-input component resides within an ion-col component, the on-screen keyboard should not cover the input element when it has focus.

The below demo does not use the grid/row/col components.

Steps to reproduce:
Use the following code code below to reproduce.

Related code:

<ion-header>
  <ion-navbar color="navbarColor">

    <ion-title><img class="title-image" src="assets/images/mb-logo-w.png"/></ion-title>
    <ion-buttons end>
      <a class="hidden-sm" ion-button color="light" clear href="index.html">
        Start Over
      </a>
      <a class="hidden-lg" ion-button icon-only color="light" clear href="index.html">
        <ion-icon name="power"></ion-icon>
      </a>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content>
 <ion-grid>
        <ion-row responsive-sm>
          <ion-col width-50>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text" ></ion-input>
            </ion-item>
          </ion-col>
          <ion-col width-50>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text" ></ion-input>
            </ion-item>
          </ion-col>
        </ion-row>
        <ion-row responsive-sm>
          <ion-col width-50>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text"></ion-input>
            </ion-item>
          </ion-col>
          <ion-col width-50>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text"></ion-input>
            </ion-item>
          </ion-col>
        </ion-row>
        <ion-row responsive-sm>
          <ion-col width-50>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text"></ion-input>
            </ion-item>
          </ion-col>
          <ion-col width-50>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text"></ion-input>
            </ion-item>
          </ion-col>
        </ion-row>
        <ion-row responsive-sm>
          <ion-col width-50>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text" ></ion-input>
            </ion-item>
          </ion-col>
          <ion-col width-50>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text"></ion-input>
            </ion-item>
          </ion-col>
        </ion-row>
        <ion-row responsive-sm>
          <ion-col width-50>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text" ></ion-input>
            </ion-item>
          </ion-col>
          <ion-col width-50>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text" ></ion-input>
            </ion-item>
          </ion-col>
        </ion-row>
      </ion-grid>
</ion-content>

Other information:
IOS 10.x. I'm not experiencing the issue in the ionic 2.0.0 environment. Only since i've moved to ionic 2.1.0. I've tried to determine what differences may be present in the generated html, but I do not see any. Ionic-Keyboard plugin is installed with default configuration.

FYI: The issue doesn't occur after rolling back to "ionic-angular": "2.0.0" and "@ionic/app-scripts": "1.0.0"
Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: 1.9.0 
ios-sim version: 5.0.11 
OS: macOS Sierra
Node Version: v6.9.5
Xcode version: Xcode 8.2.1 Build version 8C1002

[AmitMY]

I'm having the same problem on Android. Post on forum: https://forum.ionicframework.com/t/android-keyboard-is-over-the-input-doesnt-scroll-to-input/81450

(There is no new info there, just to show the problem occurs and to supply another buggy case)

[mikelunn]

@AmitMY I also posted a question to the forum, as well as the slack channel. I was able to get the markup to function as expected by rolling back dependencies to "ionic-angular": "2.0.0" and "@ionic/app-scripts": "1.0.0"

[brunomrpx]

Hi guys. I solved the problem adding the styleposition: initial to ion-col elements. It seems that ion-colhas position: relative and on input focus, the scroll is based on the offsetTop that is relative to the top of the offsetParent node - ion-col in this case. I think that removing this line also solves the problem, but I don't know if it doesn't break something.

[AmitMY]

@brunomrpx Thanks! Solved for me also.

[mikelunn]

@brunomrpx Thanks. Setting position to initial for ion-col elements fixed the scroll issue for me as well. I'm not sure what course of action should be taken at this point. Since this was working in the 2.0.0 release, i'll leave the issue open. Thanks for your help.

[dylanvdmerwe]

Note that this is still an issue with release 3.1.0.

[manucorporat]

Keyboard is a big priority for us, but understand this is complicated. Fortunately I think all issues will be fixed here: https://github.com/driftyco/ionic/pull/11401/files

plus some native assistance in the latest WK plugin

[lfitzgerald]

@manucorporat Do you know when 11401 will be in a release?

[MikeMijnheer]

Setting position to initial for ion-col elements worked also for me, few weeks ago.. but now it doesn't anymore (it's been some time since I last tested this). Anyone else has the same?

[mikelunn]

@MikeMijnheer What changed? Did you upgrade your ionic version?

[MikeMijnheer]

Tbh, I cannot think of anything that changed, I didnt upgrade anything. I still have version 2.2.0.
EDIT: only thing I can think of is that I now runned the application from the .apk (after build), and previously from IonicView app. Both for Android.

EDIT: Also on IonicView it doesn't work anymore..

[lpsantana]

Any solution on this?

[viveksinha9]

Any update on this? Having same problem.

[Nightmarepg]

Im also facing this issue with Android.

[MikeMijnheer]

I could solve this by adding "scrollAssist: true" and "autoFocusAssist: true" to app.module in the @ngModule. Like this:
imports: [
IonicModule.forRoot(MyApp, {
scrollAssist: true,
autoFocusAssist: true
})
],

[viveksinha9]

@MikeMijnheer It's not working. I solved this problem in iOS using .input-cover{position: static}. But problem still persist in android.

[ddoerr]

+1 This is critical for our project.

[anna-git]

same problem for me. Thanks to @brunomrpx it works now, but last grid row still can't really show up, even if everything is pushed up, there would need a few pixels more. Thanks a lot for your answer, with some padding added at the bottom of the ion-grid (for the last row with inputs to show up), it finally worked fine on every row for me, good solution meanwhile, even if adding padding makes the view scroll a bit...

[RomanSaronov]

Same problem. Waiting for solution. Thanx

[digaus]

Still having the issue... first col works fine but all others not... suggested solutions did not work on Android.

[ekhmoi]

Any update on this one?

[chillyprig]

Did you guys try this:
1fe1c1e

for me it worked for iOS, Still need the solution for android

[nosTa1337]

Got the same issue. Any solutions for android?

The solution from @brunomrpx with the initial to ion-col did work for one page. thanks mate.
But the mainpage I need to use this is still f*cked up.

      <ion-item>
        <ion-grid item-content>
          <ion-row>
            <ion-col>
              <ion-item>
                <ion-label floating>Charge</ion-label>
                <ion-input type="text" [(ngModel)]="confirmation.identifiedStock" value="{{confirmation.identifiedStock}}"></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
        </ion-grid>
        <ion-checkbox item-right [(ngModel)]="confirmation.checkedStock" class="modifiyCover"></ion-checkbox>
      </ion-item>`

Thats where it doesnt work.

[cgrall4cloud]

Same Issue.

EDIT:
@brunomrpx Solution worked. Thanks!

[pthorp]

@viveksinha9
Using .input-cover{position: static} resolved my problem with this issue too.

[PrateekChitransh]

.col {
position : initial !important;
}

in app.scss worked for me. Thanks.

[daveshirman]

@adamdbradley

Why is this still an open issue? This is ridiculous!

We know you're all working super hard and appreciate it, but this is such a basic piece of functionality for the framework that needs to be prioritised over offering cloud services and PWAs etc.

I've got similar outstanding tickets with no reply and they're just as fundamental. People will start abandoning your platform for React Native or NativeScript or A.N.Other framework if basic functionality like this isn't right. It's crucial to apps being usable and marketable.

Please advise. Thanks.

[nosTa1337]

I totally agree with @daveshirman

My problem from 26th july still exists.

you can also see that the header moves up around 6px~ when the keyboard closes and doesn't move back because of this bug.

[iamongit]

After wasting an hour and going through a couple dozen related issues this is what finally worked for me, I'm using the latest ionic.
ion-col { position: initial !important; }
Keyboard scrolling/not-scrolling and bouncing content around is a mess with ionic apps, so many open issues linked to each other and no definitive solution.
Thanks @brunomrpx

[aslaugsollilja]

any news on this? None of the suggested solutions work for me... the problem is on android, IOS works fine

[nosTa1337]

As there haven't been a working solution for my special case I did the positioning by myself. Isn't that nice but better than a hidden input field behind the keyboard.

@ViewChild(Content) content: Content;
//fix the scrolling until ionic has fixed it ...
private scrollTo(elementId: string, delay?: number)
{
        if (!delay)
            delay = 0;

        setTimeout(() =>
        {
            let yOffset = 0;
            let element;

            if (elementId !== null)
            {
                element = document.getElementById(elementId);

                if (elementId.startsWith('serial'))
                {
                    yOffset = element.offsetTop + element.parentElement.parentElement.parentElement.parentElement.offsetTop - 40;
                } else if (elementId.startsWith('identified') || elementId.startsWith('location'))
                {
                    yOffset = element.parentElement.offsetTop + element.parentElement.parentElement.parentElement.parentElement.offsetTop - 10;
                }
            }

            this.content.scrollTo(0, yOffset, 750);
        }, delay);
}

In the HTML assign the id to the highest ion-item.

<ion-item id="location">
....
<ion-input (ionFocus)="scrollTo('location')"....>
...
</ion-item>

[NagarajVenkatesan]

<ion-input type="text" name="username" [(ngModel)]="model.username" (ionFocus)="myfunction();" required>

---

import { Content } from 'ionic-angular';

@ViewChild(Content) content: Content;

myfunction(){
this.content.scrollTo(0,200);
}

[Alex0x47]

Thanks to @NagarajVenkatesan and some research, I found a solution for iOS and Android.

- iOs :
In app.module.ts :

imports: [
    [...]
    IonicModule.forRoot(MyApp, {
      platforms:{
        ios:{
          scrollAssist: false,
          autoFocusAssist: false
        }
      }
    }),
   [...]
  ]

That's all.

- Android :
In my view :

<ion-textarea (ionFocus)="fixScroll()" id="absence-textarea"></ion-textarea>

.ts file :

fixScroll(){
    if(this.device.platform == "Android"){
      setTimeout(() => {
        let element = document.getElementById("absence-textarea");
        let box = element.getBoundingClientRect();
        let top = Math.round(box.top*10);
        this.content.scrollTo(0, top, 100);
      }, 350);
    }
  }

I use a timeout so the keyboard is active when the code is executed. Obviously the "box.top" value depends on your HTML structure. It looks like, for me, that 10 times the difference between the top of my element and the top of the view (when the keyboard is active) sets the element at a right place. I'll have to do more tests but for now, it's the best solution I found.

[hiepxanh]

this issue, should not be exist after 1 year, it was 1 year.

[jerodfritz]

This placed in my app.scss resolves the problem for me

ion-col {
  position: initial !important;
}

[felipegouveiae]

@adamdbradley @brandyscarney @manucorporat

Is there any news about that? Can someone from Ionic Team advise?

[daveshirman]

The Ionic team have very plainly stated they're not releasing any fixes for the current ionic version and instead focusing on a new release. There is no point wasting time waiting for a fix on existing issues. Find a workaround. Quite a shame but that's the reality.

…

On Tue, 10 Apr 2018, 03:45 Felipe Esteves, ***@***.***> wrote: @adamdbradley <https://github.com/adamdbradley> @brandyscarney <https://github.com/brandyscarney> @manucorporat <https://github.com/manucorporat> Is there any news about that? Can someone from Ionic Team advise? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10629 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANnlXpHaGBPSAaWd-udnepL0LqjV9479ks5tnA7AgaJpZM4MRZO6> .

[felipegouveiae]

@daveshirman this is quite disappointing not to say unacceptable.

We're using the latest version. Ionic 3. Instead of creating new versions that as a consequence of this type of answer no one would bother to use, your company may should pay attention to retaining existing customers.

I have an Ionic Pro Developer Customer and I have 3 apps on Ionic in the last 3 months and the Ionic Team just turn its backs on us?

In several situations, I defended Ionic over Reactive Native to get a stupid answer like that.

No cool at all.

@adamdbradley @brandyscarney @manucorporat

[mhartington]

@felipegouveiae We have not turned our back on you.

We've been working on the 4.0 version of Ionic which contains a lot of bug fixes and improvements to the overall framework. This issue is closed as it's been fixed in the next major release.

[brandyscarney]

I just want to chime in here. We realize it looks like we haven't been fixing issues or possibly doing much of anything because of the lack of responses on issues. The framework team is a small team - there are currently 9 of us on the framework (which includes the CLI, documentation, Stencil & more). We have a meeting every Monday morning to discuss our week, and we update our public Ionic Framework Meeting notes so others can see what we're focused on. While we could spend more time responding to issues, this would mean we are spending less time making code fixes. In order to fix a lot of the underlying issues, we made the decision to put all of our focus into the next version.

Why did we decide to go all in on the next major version? We have spent a lot of our time keeping the framework up-to-date with each release of Angular, trying to decrease startup times, and working on build scripts. The more time we spent on all of this, the less time we had to spend on improving and adding components. In order to solve this, we decided to test out migrating our internal components to use web components. We ended up building a web component compiler called Stencil to make it easier for us to create standards-based web components. What we found is that web components introduce a lot of benefits for both us as open source maintainers and you as an Ionic developer. With the switch to use web components internally startup times have decreased, less code is being shipped, many issues are being fixed indirectly, we are moving towards web standards, we're seeing performance gains that are aligned with Google's requirements for PWAs, we have decoupled ourselves from Angular releases (which means you don't have to wait on us to update!), we've switched to using Angular's tooling and we have gained the ability to support multiple frameworks.

I want to clarify that adding support for multiple frameworks does not mean we don't still love or support Angular. We are first and foremost supporting Angular, so much so that we have added support for their router and CLI. We're working hard to make the migration as smooth as possible. We recently released a 4.0.0-alpha.0 of @ionic/angular and have so far received a lot of constructive & positive feedback. Hopefully we will have a beta out soon, and with it a blog post with steps to upgrade. Thank you for your understanding.

[renanrlp]

Thanks to @Alex0x47! Great solution! In iOS it worked beautifully, but, for me, in Android, the problem persists...
Would anyone have an idea of what might be happening?

[Stephane84]

I also had issues with the keyboard (cordova-plugin-ionic-keyboard) in ionic3.
Not in grid, but simply in a form with ion-list and ion-item of input
The keyboard was scrolling over the clicked input.
I solved it by :
putting in config.xml :
<preference name="KeyboardResizeMode" value="ionic" />

putting in app.module.ts :

IonicModule.forRoot(MyApp, {
    scrollPadding: false,
    scrollAssist: false,
    autoFocusAssist: false,
)}

putting in the constructor of app.components.ts :

window.addEventListener("keyboardDidShow", () => {
    document.activeElement.scrollIntoView(false);
});

Then, when we click an input, we catch the event fired when the keyboard is shown, and, use js function scrollIntoView on the focused element, to make it visible in the DOM by scrolling the content.

scrollIntoView can be align to top of scroll-content or at the bottom with the keyboard.

You can also try to add margin top or bottom at the input by scrolling many px :

window.addEventListener("keyboardDidShow", () => {
    document.activeElement.scrollIntoView(false);
    
    const elem: HTMLCollectionOf<Element> = document.getElementsByClassName("scroll-content"); // The last content shown, so the current page
    if (elem !== undefined && elem.length > 0) {
        elem[elem.length - 1].scrollTop += 40; // add 40px between the keyboard and the input
    }

});

[Nytsee]

Hey everyone, i've been struggling with this issue for a long time and this line solved it 👍
page-chat{
.scroll-content{
margin-top:50px !important; // the value should be the exacte ion-header height !
}
}

[hiepxanh]

Ithank you @Nytsee y

[maikonigor]

the solution proposed by @brunomrpx worked fine for me!

Obrigado cara! Se eu tivesse perto de ti, te pagava uma cerveja!

[atheerahassan]

none of the answers worked for me when I run ionic serve -l. everything just seems to be perfectly fine when I generate it in apk..

[rdss-jpupeter]

@Alex0x47 thanks for your approach! Additionally to your solution I have to add the following line to the app.component.ts

this.keyboard.didShow.subscribe(() =>{ document.activeElement.scrollIntoView(false) })

keyboard is an instance of Keyboard from '@Ionic-Angular'

[MrDrProfX]

Here's a directive you can slap on to any div container which will auto adjust the marginBottom to account for the keyboard size <div move-up-with-keyboard>...</div>:

(don't use it on ion-content, that wont work, use it on a div or other normal containers)

import { Directive, ElementRef } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';

@Directive({
  selector: '[move-up-with-keyboard]' // Attribute selector
})
export class MoveUpWithKeyboardDirective {

  constructor(private keyboard: Keyboard, private elementRef: ElementRef) {}

  ngAfterViewInit() {
    this.keyboard.onKeyboardShow().subscribe(event => {
      this.elementRef.nativeElement.style.marginBottom = event.keyboardHeight + 'px';
    });
    this.keyboard.onKeyboardHide().subscribe(event => {
      this.elementRef.nativeElement.style.marginBottom = '0px';
    });
  }
}

[aniciom]

@Alex0x47 Best solution i've found atm thanks a lot man

@mhartington Mike i understand ionic team is having higher priorities fixing this issue for the new version , but there's still a lot of people whose are developing their apps using ionic 3, there won't be any kind of fix for this matter? Its really a critical thing.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.