Keyboard overlapping input fields in webview

Hi so I wanted to create a mobile application for an existing webpage. I decided to wrap that website so I have used “open web browser”.

But now inside the application, when there are input fields at the bottom of the page, the keyboard overlap the input fields as shown in the picture below:

This how it looks for every input fields in the app.

Also when I tried this webpage in the mobile browser, there was no keyboard overlapping issue. It only arises when I use it as mobile application.

Since I am new with AppGyver, how do I fix this issue?

Have your tried this?

First you’ll need to enclose the component in a “scroll View” component.

Select the scroll View and change its hight and width to “grow to width and grow the height” under custom.

Set your page to stretch to viewport height and disable scrolling under page style.

Each time your keyboard opens, you’ll be able to scroll through the hidden components.

Hope this helps.