Ionic 4 - View not push up when keyboard is shown

Ionic Framework ionic-v3
1

Hi, I am having a problem regarding to a view not push up when keyboard is shown, so I cannot key in the field that keyboard render over, please help

1 Like
2

Hi! Im having the same problem.
I’ve tried downgrading, replacing the plugins from cordova and ionic and still i cant make ionic push the components when (in my case) the android keyboard pops up.

So far my page just contains the classic <ion-header> and <ion-content> which containts some <ion-input> inside. I have even commented the styles.

How can I help to find a way to fix this?

3

@sereyvuthy I found a workaround which works pretty good (At least for me).

We’ve added an empty <ion-input> before the ending tag of the <ion-component> with a custom style which will be changed depending if the keyboard is open or not.

For this to work we had to implement the ionic-keyboard plugin (and dont forget to add it in your app.modules.ts)

Then we also had to add a function which is binded to the ionFocus function of your ionic-input elements.

Here’s a sample of my code where you can see the call of eventFocus on each ionFocus inside the ion-item and the style in the empty ion-item before the ion-content:

<ion-content padding>
...
...
  <ion-item>
	<ion-label position="floating">Tel&eacute;fono</ion-label>
    <ion-input required type="tel" [(ngModel)]="telefono" (ionFocus)="focusInput($event)"></ion-input>
  </ion-item>
  <ion-item>
	<ion-label position="floating">Mail</ion-label>
    <ion-input required type="email" [(ngModel)]="email" (ionFocus)="focusInput($event)"></ion-input>
  </ion-item>
  <ion-item [ngStyle]="keyboardStyle" >
  </ion-item>
</ion-content>

On the page.ts we have the following code:

We define:
keyboardStyle = { width: '100%', height: '0px' };

Then on your constructor:

constructor(private httpClient: HTTP, public core: CoreService, private router: Router,
    private popoverController: PopoverController, private keyboard: Keyboard) {
      console.log('Entra al constructor.');
      this.keyboard.onKeyboardWillShow().subscribe( {
        next: x => {
          this.keyboardStyle.height = x.keyboardHeight + 'px';
        },
        error: e => {
          console.log(e);
        }
      });
      this.keyboard.onKeyboardWillHide().subscribe( {
        next: x => {
          this.keyboardStyle.height = '0px';
        },
        error: e => {
          console.log(e);
        }
      });
      console.log('Sale del constructor');
    }

This last function which is called each time the user makes focus on an input was created by another developer. Thank you a lot sjoerd216 (From Stack Overflow)

public focusInput (event): void {
      let total = 0;
      let container = null;

      const _rec = (obj) => {

          total += obj.offsetTop;
          const par = obj.offsetParent;
          if (par && par.localName !== 'ion-content') {
              _rec(par);
          } else {
              container = par;
          }
      };
      _rec(event.target);
      setTimeout(() => {
        container.scrollToPoint(0, total - 50, 400);
      }, 500);
    }

I hope it works for anyone else having this problem.

4 Likes
4

@lichojm Thanks, i’ll try and let you know

5

Hiya :slight_smile:

I was having this same issue! After about 1.5hrs of trying to fix the problem I eventually just removed the android platform and added it again at version 8.0.0 and all worked fine.

Hope this will also help for you.

Regards

1 Like
6

this.keyboard.onKeyboardWillShow().subscribe( {
next: x => {
this.keyboardStyle.height = x.keyboardHeight + ‘px’;
},
error: e => {
console.log(e);
}
});

It works for me!!! Thanks