CODEWITHSUNDEEP
htmlcss
TiltedBlock
TiltedBlock

Reputation: 85

How can I get the Android soft keyboard to overlay my website?

I have a problem that seems pretty simple to me, but so far it was impossible to find a simple solution: On my website, whenever the Android soft keyboard pops up, it resizes the window and shrinks the content, instead of just overlaying the page.

See these pictures for reference: website screenshot

The first two are the current situation, the third is what I want. It works like this on iOS. What can I do to make it work that way?

The screenshots were taken in Firefox - this is a website based on HTML, not a native app.

I tried setting body size and position, but so far, no luck. I've seen some very complicated JS code snippets for similar problems, but I didn't get any of them to work the way I want, and it also seems like there should be an easier way around it. The sizes of all the elements are determined with vh and wv. Setting fixed pixel values seems like it would kill the responsiveness of the design, no?

I'm not a very experienced developer, my page is just very basic HTML and CSS. Is there a way to achieve what I want with only that?

Upvotes: 0

Views: 1113

Answers (1)

javdromero
javdromero

Reputation: 1937

On your manifest.xml you can set android:windowSoftInputMode to adjustPan.

<activity
 android:name=".WebActivity"
 android:windowSoftInputMode="adjustPan" />

From Android documentation:

Don't resize the window to make room for the soft input area; instead pan the contents of the window as focus moves inside of it so that the user can see what they are typing. This is generally less desireable than panning because the user may need to close the input area to get at and interact with parts of the window

Upvotes: 2

Related Questions