Cordova android keyboard push up content

Question

I have some content/input fields that are covered when the android keyboard is shown in my cordova app. I have android:windowSoftInputMode="adjustPan" and <preference name="fullscreen" value="false" />

I tried android:windowSoftInputMode="adjustResize but it kept shrinking my content because it was resizing the window (My content is sized based on viewport width and viewport height). Thank you for any suggestions!

Answer 1

So I had a work around myself that may or may not work for everyone, but I figured I could post this to hopefully help someone who comes across this!

I found a lot of answers but none really helped me. So in my AndroidManinfest.xml file I set android:windowSoftInputMode="adjustPan|stateHidden". Yes, this will still cover the content below the keyboard when it's opened.

To avoid that, I gave all of my scroll views that would be affected by the keyboard being shown a class of inputScrollContainer. Name them whatever you would like.

Since every container (for me) was the same height as was the top bar for each page, I did the following: (you will have to install the device plugin and the keyboard plugin from cordova

• Got window.innerHeight at the beginning of my js (if you do this inside of your native.keyboardshow function, iOS will give you the resized view based on the keyboard's height)

Then, inside my native.keyboardShow function, I did the following: - Then got the height of the top bar (I chose one as they were all the same) - Added the added the keyboard height and top bar height together - Then I subtracted those from the window height

Doing this now gave me the height "leftover" for the scroll view to have. After that I:

• Got all elements by class name inputScrollContainer
• Looped through them and assigned the new height to each (you can assign it to the only scroll view currently in view, but I only had three affected views so I wasn't worried about it)

Now the scroll view was resized to whatever was left between the top bar and the keyboard. Then on my native.keyboardhide function, I just restored the height to what the original height for all of the scroll views was before.

I'm sure there are other ways to do this, but doing it this way gave me flexibility and consistency across iOS and Android. I hope this helps someone!

Answer 2

To move the layout up when the keyboard is visible/shown add the following activity.

<activity android:windowSoftInputMode="adjustPan|adjustResize"> </activity>

adjustResize : The activity's main window is always resized to make room for the soft keyboard on screen.

adjustPan : The activity's main window is not resized to make room for the soft keyboard. Rather, the contents of the window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing. This is generally less desirable than resizing, because the user may need to close the soft keyboard to get at and interact with obscured parts of the window. In your scenario you can make use of adjust pan However it works based on the android versions. It may not work in particular versions. please be find and use.

Please have look at this answer you will come to know a lot.

Answer 3

Viewport height is the problem here. There is some way to correct the problem with mediaqueries, or with javascript (modifying all of your dom element with the correct height). But in my case, I had lots of dom elements, and really didn't want to change all of this with javascript. My trick is : - Change all of your vh with rem and divide your value by 4 - use this little javascript in all of your page :

$("html").css({"font-size": ($(window).height()/25)+"px"});

Here we go, in this example, font-size is 4% of window height (cause font-size has a minimum value on mobile app), so : 1rem=4% of widow height=4vh 0.25rem = 1vh etc...

In my case, I use a SASS function to divide with 4 all of my vh, so it was easier to change all css. (1h = rem(1) = 0.25rem)

Hope this will help someday.

Answer 4

This JS option delivers a UX similar to iOS:

let events = {
    android: {
        keyboard: {
            threshold: 300, //px
            transition: 300, //ms
            visible: false,
            last_el: null
        }
    }
}


onAndroidKeyboard() {
    if(is_android) {
        let threshold = events.android.keyboard.threshold;
        let transition = events.android.keyboard.transition;

        function onIn(e) {
            let target = e.target;

            if(target.nodeName.toLowerCase() !== 'input') {
                 return false
            }

            let visible = events.android.keyboard.visible;

            let h = window.innerHeight;

            try {
                let bottom = target.getBoundingClientRect().bottom;

                if(bottom) {
                    let diff = h - bottom;

                    if(diff < threshold) {
                        if(!visible) {
                            let animate_amount = threshold - diff;
                            events.android.keyboard.visible = true;
                            document.body.style.transform = 'translateY(0)';
                            document.body.style.webkitTransition = `all ${transition}ms`;
                            document.body.style.transition = `all ${transition}ms`;
                            events.android.keyboard.visible = true;
                            events.android.keyboard.last_el = target;
                            requestAnimationFrame(function () {
                                document.body.style.transform = `translateY(-${animate_amount}px)`;
                            });
                        }
                    }
                }
            } catch (e) {
                console.error(e);
            }
        }

        function onOut(e) {
            let visible = events.android.keyboard.visible;

            if(visible) {
                document.body.style.transform = 'translateY(0)';

                setTimeout(function () {
                    requestAnimationFrame(function () {
                        document.body.style.removeProperty('transform');
                        document.body.style.removeProperty('transition');
                        document.body.style.removeProperty('webkitTransition');

                        events.android.keyboard.visible = false;
                        events.android.keyboard.last_el = null;
                    });
                }, transition)
            }
        }

        document.addEventListener('focusin', onIn, false);
        document.addEventListener('focusout', onOut, false);
    }
}