Apps HTML5 mobile web application and soft keyboard

[erols]

Hey people,

I'm working on a mobile web application and all phones don't casue any trouble with the soft keyboard and input fields, but Android does (tested on a HTC One).

Here's the problem:
I've got a log in page with a log in form. When and input is selected, the soft keyboard appears. The soft keyboard kicks some elements up, which causes the lay out of the page to break. On iOS and Windows Phone, the soft keyboard kicks the whole page, so basically the DOM or body up to make room for the soft keyboard. The Android browser, however, lets the body stay where it is and only kicks some elements up, which causes the lay out to break.

Here are a few screenshots of the problem:

Normal page:

When input is selected:

What the desired effect is (achieved on iOS and Windows Phone):

Thanks in advance!

I haven't used any position fixed, only absolute on the page wrapper, header and header logo.

 

[Rukbat]

Your positions aren't absolute, they're relative to the keyboard. Try it without 'position' in the CSS. (The engine should be drawing the logo at a negative absolute position when the keyboard comes up. It can't if the logo has absolute positioning.)

 

[infamousstudio]

yes it is good