In iOS, there seems to be an issue with the keyboard overlapping parts of the UI instead of moving them like in Android. 

See video here: video

Is this something that can be overcome with a cross platform workaround? 

The UI works as expected on Android (tested on Pixel 2 & 3XL). 

iPhone in video is an iPhone 7 with iOS 12.3.1

Is this a web or mobile app?

What version of OutSystems platform are you on?

What version of Service Studio are you using?

More info will be helpful in getting a good answer.

One forum thread that may be helpful is here:

https://www.outsystems.com/forums/discussion/35988/keyboard-hides-form-fields-on-mobile-device-when-user-clicked-on-it-or-make-focu/

Also, not sure if you noticed the up/down arrows at the top left of the keyboard, but those allow you to move between the different form fields. Have you tried using the arrows to access the fields that are behind the keyboard? If so, what happened?

This is a mobile app on an iPhone 7 running iOS 12.3.1.

This application was built on the latest Outsystems software.

The text can be entered in the field even though the keyboard is hiding them, but the user wouldn't be able to see what was typed.


If possible, I would recommend testing on another iOS device. That would help determine if it's device-specific, rather than generic to iOS in general.

Did you build a native wrapper for the mobile app, or are you running it using OutSystems Now?

This is on a native wrapper. I have tested it on an iPhone 6 Plus as well with the same result.

Yes, on Android, keyboard will reduce viewport's height, while IOS isn't.

As a workaround, I have to add some fixed height container at the bottom, and only show it if IOS.

Harlin Setiadarma wrote:

Yes, on Android, keyboard will reduce viewport's height, while IOS isn't.

As a workaround, I have to add some fixed height container at the bottom, and only show it if IOS.

That's what I ended up doing. 

Is this something that would be fixed on later versions of Outsystems?


Maybe if you create support ticket so Outsystems notice the problem. 

Hi, 

I have solved this problem with a blank container with a height of 600px at the bottom of the screen. 

Create a local variable for the container's visible field to control when it will be shown and with a boolean data type. Also, create an action to control the state of the local variable. Furthermore, in the input field, set on the onclick event to pass true to the action and onblur event you should pass false. 

So, the result of this should be when clicking on the input field, the blank space will show and when you leave the field, the blank space will be hidden. By doing that you get more space for the screen and the keyboard can be adjusted properly.

If it doesn't work for you, try to change the value of the height of the container. I hope it helps you!