question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: Ionic Keyboard not working height out correctly

See original GitHub issue

Bug Report

Ionic version: [ ] 4.x [x] 5.30.0

Current behavior: This bug has been driving me around in circles and consumed an enormous amount of hours but I’m beginning to think it might be an ionic bug.

When I call the following:

Keyboard.addListener('keyboardWillShow', (info: KeyboardInfo) => {
    console.log("keyboardHeight",  info.keyboardHeight)
});

then keyboardHeight = 326. showing the following:

image

if I dismiss the keyboard and re-open it, on the off-chance it’ll give me the correct height which is 355. Showing the following:

image

It’ll also give me the correct height if I go into the keyboard options (in the bottom right corner when the keyboard shows) and re-select the same keyboard

Please see attached video for more information

Expected behavior: To get the correct height each time

Steps to reproduce: As mentioned above

Related code:

As shown above

Other information: https://user-images.githubusercontent.com/12820928/115383895-46514c00-a1ce-11eb-9887-bd5f1ff13a06.mov

Ionic info:

Ionic:

   Ionic CLI                     : 6.13.1 (/Users/mwyld/.nvm/versions/node/v12.20.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.2
   @angular-devkit/build-angular : 0.901.9
   @angular-devkit/schematics    : 9.1.9
   @angular/cli                  : 9.1.14
   @ionic/angular-toolkit        : 2.3.0

Capacitor:

   Capacitor CLI   : 2.4.5
   @capacitor/core : 2.4.5

Utility:

   cordova-res : 0.15.3
   native-run  : not installed

System:

   NodeJS : v12.20.1 (/Users/mwyld/.nvm/versions/node/v12.20.1/bin/node)
   npm    : 6.14.10
   OS     : macOS Big Sur

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
achakra21commented, Apr 24, 2021

Put the input box in <ion-footer> so when keybord is open the footer would always top of SoftkeyPad & you will get desired result . It never hide behind the softkeypad. If that doesn’t help let me know

0reactions
liamdebeasicommented, May 11, 2021

Thanks for the issue! This issue is being closed due to the lack of a code reproduction. 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.

Thank you for using Ionic!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ionic 2 <ion-content> height dynamically changes while ...
I accidentally discovered out that <ion-content> vertical size changes if I'm clicking an input field and device keyboard appears.
Read more >
Image height is stretched in IOS for Ionic 5 app - Stack Overflow
The browser and android is showing the correct size. enter image description here. Following is the IOS image. The height is stretched out....
Read more >
Keyboard improvements for Ionic Apps - Ionic Blog
Let's face it: the keyboard is a constant source of pain and frustration for users and developers. Much of this has to do...
Read more >
height:100% is not 100% after rotating device - Apple Developer
Has anybody seen this before? Any ideas for working around it? It is making all of our web apps "scrunch up" after users...
Read more >
Bug listing with status RESOLVED with resolution FIXED as at ...
... Bug:104 - "loop device doesn't work properly" status:RESOLVED ... Bug:392 - "grace 5.1.6 is out" status:RESOLVED resolution:FIXED severity:normal ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found