CODEWITHSUNDEEP
androidcordovameteormobileangular-meteor
Dani
Dani

Reputation: 4186

Input overlapped by keyboard on mobile

I'm developing an app with angular-meteor and every time I focus an input which is on the bottom of the screen the keyboard overlaps it.

I tried adding this to my mobile-config.js but doesn't work:

App.setPreference('fullscreen', false);
App.setPreference('android-windowSoftInputMode', 'adjustResize');

And also this meta on my index.html:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi, width=device-width" />

Am I forgetting something?

Upvotes: 3

Views: 1461

Answers (2)

Roshdy
Roshdy

Reputation: 1812

This is working for me almost for all situations.

This code is under the path: 

── client
   ├── main.js

// Global variables 
let keyboardHeight = 0, originalHeight = 0;

Meteor.startup(() => {
    if(Meteor.isCordova){
        StatusBar.hide();

        // ionic plugin defaults to hide it
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);

        // Android specific events
        isAndroid = cordova.platformId == 'android';
        if(isAndroid){
            // Handle android backbutton
            document.addEventListener("backbutton", onBackButtonDown, false);

            // Using ionic-plugin-keyboard
            window.addEventListener("native.keyboardshow", onShowKeyboard, false);
            window.addEventListener("native.keyboardhide", onHideKeyboard, false);
        }
    }
};
onShowKeyboard = function(e){
    let elem = document.activeElement,      // Get the focused element
        $parent = $(elem).scrollParent();   // Get closest scrollable ancestor (jQuery UI)

    // If there is no scrollable parent, no need to continue processing
    if($parent.length == 0){
        return;
    }

    // Check if the keyborad type has changed (i.e. from text to number)
    if(keyboardHeight != e.keyboardHeight){
        keyboardHeight = e.keyboardHeight;
    }

    // Don't resize if the original height hasn't been reset by onHideKeyboard()
    if(originalHeight == 0){
        originalHeight = $parent.height();
    }

    // Subtract keyboard height from parent height + accessory bar height
    // Add some class to the parent, to be able to get it back to normal state onHideKeyboard()
    $parent.height(originalHeight - keyboardHeight + 50).addClass('adjusted');

    // Give the keyboard time to show
    setTimeout(function() {     
        // Scroll to active element
        document.activeElement.scrollIntoView({
            behavior: "smooth", // or "auto" or "instant"
            block: "center"     // or "start" or "end"
        });
    }, 100);

    // Unbind DOM object from HTML for garbage collection
    elem = null;
    $parent.prevObject = null; // To avoid memory leak (for any jQuery DOM object)
    $parent = null;
};
onHideKeyboard = function(e){
    let s = $('.adjusted').attr('style');
    s = s.replace(/height.*;/, '');
    $('.adjusted').attr('style', s).removeClass('adjusted');
    keyboardHeight = 0;
    originalHeight = 0;
};

Upvotes: 1

Kody R.
Kody R.

Reputation: 2460

So you have two options for Android (iOS handles it a bit nicer for you). In your AndroidManifest.xml file you will see android:windowSoftInputMode inside of your first <activity> tag. This will adjust how the keyboard interacts with the screen. Here is more information on how it works.

Upvotes: 1

Related Questions