Div Element Won't Stay at The Bottom When iOS 7 Virtual Keyboard Is Present

Div element won't stay at the bottom when ios 7 virtual keyboard is present

EDIT: Okay, I found another possible solution. Check your html meta tags for something like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

Replace it with this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

This fixed the problem for me. I should note that my app is using Cordova though.

Another possible solution:

If you look in config.xml (probably under the resources directory, you should see a line that says:

<preference name="KeyboardShrinksView" value="false" />

If you set that to true, it keeps footers from moving above the soft keyboard. However, this also causes the keyboard to sometimes cover up the text field that the user is typing in.

Retaining page layout when on-screen keyboard appears (iOS/phonegap)

You need to add this to your config.xml:

<preference name="KeyboardShrinksView" value="false" />

Take a look at this post It is a similar issue.

ios7 keyboard, when it opens shrinks web-app

The solution ended up being very simple.

I removed this height=device-height again, and just left this $("#my_app").css("height",window.innerHeight); and every thing was fine again.

Cordova/Phonegap 3.1 keyboard (still) overlays focused form fields - iOS 7

Just had a very similar problem to this. Some of the hacks found on this site did work, but had nasty side effects (such as making a mess of scrolling or CSS layout). Finally came up with a brand new stupid hack.

Viewport meta tag:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width" />

JavaScript run after load:

document.body.style.height = screen.availHeight + 'px';

And that's it. Works on iOS 7 and I have no idea why.

screen styling when virtual keyboard is active

I'm not sure, is this the desired effect?. check this link

http://jsfiddle.net/UHdCw/3/

Update

(1). Assuming its a website & running on device browser. Then we can check the presence of virtual keyboard by checking the screen size.

Check in device browser - http://jsfiddle.net/UHdCw/8/show/

code : - http://jsfiddle.net/UHdCw/8/

(2). If you are building native app with HTML5 & Phonegap, things will be different. Since there is no direct API hook to check the keybord status, we have to write our own plugin in Phonegap.

In Android you can check show/hide status of keyboard by using native code [check here]. and have to write Phonegap plugin to get those events in our HTML.

[Phonegap is an example. I think most of the html to native frameworks have this kind of felicity to hook with native code ]

iOS update

As you said there is no change in height/position when keyboard is present. We can do one thing, when input gets the focus we can add shrink class and reduce the element sizes. Check following link.

http://jsfiddle.net/UHdCw/28/show/

IOS Safari: unwanted scroll when keyboard is opened and body scroll is disabled

Just went through tedious searching and seems that's an issue with iPhone as you have pointed in following article : https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d

So there is no way you can do it with css for sure.

But that doesn't stops you from using JQuery and Javascript >:)

Here is an untidy work around for your scenario. Have tested with multiple text boxes too on iPhone only:

document.getElementById("app").innerHTML = `<div class="page-content"><input type="text" onfocus="disableScrolling(this)" onfocusout="enableScrolling(this)">  <p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p>  <input type="text"   id="text2"onfocus="disableScrolling(this)" onfocusout="enableScrolling(this)">  <p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p></div>`;
var currentElem; 
function stopScroll() {    if(currentElem)    {        var top = $("input:focus").offset().top;        $('html, body').stop().animate({            scrollTop: top        }, 500, function(){});    }}
function disableScrolling(elem) {    currentElem = elem;    document.addEventListener("touchend", stopScroll);    setTimeout(function()    {        stopScroll();    },10);}
function enableScrolling() {    currentElem = undefined;    document.removeEventListener("touchend", stopScroll);}

html {  height: 100%;  scroll-behavior: smooth;}
body.disable-scroll {  position: fixed;  height: 100%;  overflow: hidden;}
.page-content {  background: #ccc;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><body class="disable-scroll">  <div id="app"></div>  <div>End of body</div></body>

---

Related Topics