Android full screen web app, inputs don't scroll into view on focus

In the android browser the inputs scroll into view only after typing, not on focus, which is ok but when i open it as a full screen web app, the inputs don’t scroll into view at all even when typing. The keyboard covers the text. I tried using a scrollto plugin but it doesn’t work because the page isn’t long enough to scroll the input to the top.

attached image

1 Like

I understand. The problem is that the keyboard is blocking the view of the input field when you open the web app in full screen mode. This is because the page is not long enough to scroll the input field to the top.

There are a few possible solutions to this problem:

  1. Increase the height of the page. This will give the input field more space to move up when the keyboard is open.
  2. Use a positioning plugin to position the input field above the keyboard. This will ensure that the input field is always visible, even when the keyboard is open.
  3. Use a different keyboard. Some keyboards allow you to resize and reposition them. This could give you more flexibility in how you position the input field.

Here are some specific steps you can try for each solution:

Increase the height of the page:

  1. Open the web app in a code editor.
  2. Find the element that contains the input field.
  3. Add the following CSS to the element:

CSSheight: 100vh;

This will set the height of the element to 100% of the viewport height. This will ensure that the input field is always visible, even when the keyboard is open.

Use a positioning plugin to position the input field above the keyboard:

  1. Install a positioning plugin, such as jQuery UI Position.
  2. Add the following code to your web app:

`JavaScript$(document).ready(function() {
// Get the input field element.
var inputField = $(‘#input-field’);

// Position the input field above the keyboard.
inputField.position({
my: ‘top center’,
at: ‘bottom center’,
of: window
});
});`

This will position the input field at the bottom center of the viewport, above the keyboard.

Use a different keyboard:

  1. Install a different keyboard, such as SwiftKey or Gboard.
  2. Open the keyboard settings and resize and reposition the keyboard as needed.

I hope this helps!

1 Like