Mobile input on bottom of screen behind android keyboard

Mobile input on bottom of screen behind android keyboard

  

Hi,

In my mobile application, I have a screen with an input widget at the bottom of the screen.

Running my app (via OutSystems Now) on an android device has some weird behaviour.

When I touch the input and it gets focus, the keyboard slides out from the bottom, covering the input. I try to scroll the screen up to get to the input, but the screen does not want to scroll to the input.

Now you have to type "blind".


NOTE:

On IOS (iPhone), the input is partially behind the keyboard, but you can at least scroll to it.

On IOS (iPad), it works as expected, the screen scrolls up and the input sits neatly above the keyboard.


Kind regards,

CJ



Hi CJ,

Does that happen on a generated app also?

Hi Joao,

I haven't generated an app yet. Only testing on PC and OutSystems Now on IOS and Android.

I have a similar problem.

On Android (OutsystemsNow and native) the virtual keyboard slides over the screen obscuring any input fields below it. Although I can make the screen scroll up from behind the keyboard to reveal the input fields by swiping, this just isn't pretty or user friendly.

On iOS (OutsystemsNow, native not tested) the virtual keyboard pushes the screen up so all input fields remain visible.

So my question is, how can you make Android behave the same way iOS behaves (without breaking the app for iOS)?


Hi Frans,

In Forge I found an issue that was fixed in Silk UI mobile version 1.1.1:

"Fixed an issue with the viewport not reacting to keyboard opening and closing on Android 4.4.2"

I thought it would be related to my issue. I installed the new version, in fact I installed 1.2.1 (latest stable), and still had no luck.

Just to clarify, on Android you can actually scroll (swipe) down to the input? Did you add some additional CSS or javascript to get that to work? In my case, I cannot get to the input at all.

It would be great if someone from the SILK UI team can provide us with some help/answers :(

Hi CJ,

Just to clarify, on Android you can actually scroll (swipe) down to the input? Did you add some additional CSS or javascript to get that to work? In my case, I cannot get to the input at all.

Yes, we can scroll to the input. As a matter of fact, once you start entering something on the keyboard the input field scrolls up just above the keyboard. We have not added any CCS to get that to work. The input fields are within a form all using the default style classes provided by Outsystems.


Hi Frans,

Thanks for your reply. I'll look into why mine does not behave similar.

Solution

After many hours of testing etc etc.... these are my findings:

Expected behaviour:

- When you tap on a input box, the virtual keyboard opens

- If the input box is below the keyboard, it is automatically pushed up the screen to sit just above the keyboard

On IOS everything works as expected as long as you use the native keyboard. If you use the "swift" keyboard, the keyboard partially covers the input box and you can scroll the screen up to view it fully. (This works in both generated Native IOS App and running app in Outsystems Now)

On android, if the input box is below the keyboard:

- running the app in OutSystems Now, the input box stays hidden and you cannot scroll the screen up to get to the input box.

- in generated Native android App, if the input box is on a "full screen" - i.e. all screen content is fitted to 100% height of screen, e.g. login screen - it works as expected, input is pushed up to sit above keyboard.

- in generated Native android App, if the input box is on a non-full-screen, the box is not pushed up but you can scroll to the box.

Solution

I get the same issue. I have tried setting a full screen container (using a style of "full-height-vh") to put the edit and all content in however still get the same effect. It is particularly noticeable if the user has the phone in portrait mode. Gets rather annoying for the user if there is a submit button immediately under the input as even when it moves up after they type they still can't see the button.

This also happened in Login screen using Outsystems Now on Android.

But generated apk automatically positioned input widget below keyboard.

Has this been solved yet?

John Williams wrote:

Gets rather annoying for the user if there is a submit button immediately under the input as even when it moves up after they type they still can't see the button.

Hi John,

We have that too and it is a nuisance, but you can work around that, sort of, by adding an extended attribute to the button with a property named type and giving it the value "submit". That way the enter key on the keyboard will trigger the button.