[SOLVED] Messagebar input focus causes app keyboard to cover input field

Note: When i focus on the input field using Android device it works fine. I am able to view the messagebar with no problem. The problem is only when using iOS.

I fully implemented the messagebar component into my application.
When I am testing on actual iOS device… when I tap the messagebar input field the iOS keyboard covers the entire input field. The user is unable to see the text they are typing into the field.

How can I make the messagebar input field pop up so the user can view when they are focused on the input and entering message text ?

The user enters the message into the text input field…

On the iOS the keyboard covers the input field and user cannot see the text they type…

thank you!

If this is running as web app then you can’t do anything with it. If it is a Cordova app you need to install cordova keyboard plugin and enable to shrink the app view on keyboard open

I am running Cordova app. I installed cordova-plugin-keyboard and enabled Keyboard.shrinkView(true);
This has made improvement. Now I can see the messagebar.

However, now when the keyboard shows, it is now creating large space between between. (screenshot below)…

Any idea why this space is occuring?

Thank you!

It appears that this is a known bug on iOS 12 using this plugin.

I am going to try to patch using the zs-fix-keyboard branch made available by github user @zspencer. Hopefully this fixes it. fingers crossed.

This file has not been added to the public master of cordova-plugin-keyboard.

However, I just swapped it out and it fixed my issue… if anyone else runs into the issue… the exact file that resolved it:


1 Like

But the parameters:

scrollIntoViewOnFocus: true,
scrollIntoViewCentered: true,
scrollIntoViewAlways: true

Stop working

Install the next plugins on your Cordova Project (Its works without problem on this kind of project)
cordova-plugin-ionic-webview and cordova-plugin-ionic-keyboard

Add the next line on your config file:

<preference name=“KeyboardResize” value=“true” />

To this point, the Messagebar will work fine…but, the behavior of center the screen on click on a form element will loss.

This is provisional solution for me:

On your JS, add the next code:

var clickedInput //Global variable
//Will be triggered on Click / Focus event all the inputs and keep the ID on the variable clickedInput
$$(document).on(‘focus focusin click’, ‘input’, function (e) {
clickedInput = $$(this).attr(“id”)


Add the next code on after init F7:

//Listener that will be triggered when the keyboard was shown
window.addEventListener(‘keyboardDidShow’, (event) => {
//Check if clickedInput is a valid ID or It was initialized
if (clickedInput !== undefined && clickedInput !== null){
//Get the Y position of the element clicked
var offSet = $$("#" + clickedInput).offset().top
// if the Y element position is bigger than the window height
if (offSet > $$( window ).height() ){
// wait 800
setTimeout(function () {
//put the screen view on the element clicked
$$(’.page-content’).scrollTop( offSet, 500,
$$("#" + clickedInput).click() //show cursor on input
clickedInput = null //set null for reset the variable
}, 800);
clickedInput = null //set null for reset the variable