In Cordova iPad app, the soft keyboard pushes the DIV position upward

[Prabu]

I am working on a cordova based iPad app. 

It has a bottom panel DIV (kind of footer) uses following CSS style to dock in the bottom of the screen.

position:fixed;bottom: 0px

When user focus on text box, the soft keyboard appears and push the bottom panel upward. 

When text box losses the focus, the soft keyboard disappears, but the bottom panel DIV remains in middle of the screen.

This is not happening when keyboard was close explicitly by clicking on the hide button(button in bottom right corner) in the keyboard. 

Also, there is no issue if bottom panel DIV uses 

{position:absolute}




Other Information:

iOS Version : 7.1.1

Cordova version: 4.2

I have already doing 

window.scrollTo(0, 0);

in the onblur event of all textbox control to restore the window after keyboard is closed.

Also, I am using following viewport setting

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1,target-densitydpi=medium-dpi;width=device-width;height=device-height" />

What is the best solution to fix this issue without using 

position:absolute

 style?

[Jesse Monroy]

@Prabu,
This is not a Cordova issue per se. It is a problem with the HTML. This bug is very common. It is even in the Android world. I suspect it was a change in the standard. Jquery has a fix for it. It might work. Your best bet is try Stackoverflow on this issue.

As I said, not a Cordova issue per se.

FWIW: fixed is what you want to use. Read the online tutorials. Read the standard. I have working code, but i have not tested in on iOS7, nor have I tested the keyboard action you are seeing.

One last note, iOS 7 is using an older UIWebview library. iOS8 and iOS9 have new libraries. They are available as plugins for Cordova. You can see my notes on the webview alternatives here.

Best of Luck
Jesse

On Thursday, December 10, 2015 at 3:37:57 AM UTC-7, Prabu wrote:

I am working on a cordova based iPad app. 

It has a bottom panel DIV (kind of footer) uses following CSS style to dock in the bottom of the screen.

position:fixed;bottom: 0px

When user focus on text box, the soft keyboard appears and push the bottom panel upward. 

When text box losses the focus, the soft keyboard disappears, but the bottom panel DIV remains in middle of the screen.

::::SNIP::::

Other Information:

iOS Version : 7.1.1

Cordova version: 4.2

I have already doing 

window.scrollTo(0, 0);

in the onblur event of all textbox control to restore the window after keyboard is closed.

::::SNIP::::