How to prevent mobile keyboard from rising footer over the text fields?

Question

I am having trouble with my footer. I want the footer to stay at the bottom of the screen, but there is a slight problem. When using mobile browser, some fields get blocked by the footer when opening the keyboard. The footer rises over the keyboard and blocks the field you are typing in. How can I keep my footer at the bottom and prevent it from rising over the keyboard? I want it to stay hidden under the keyboard.

I am using bootstrap, but I have set the following stuff in my own CSS:

footer {
 width: 100%;
 position:absolute;
 left:0px;
 bottom:0px;
 height: 40px;
 margin: auto;
 overflow: hidden;
 background:#2E2E2E;
 text-align:center;
 line-height: 15px;
 color: #fff;

}

<html>
 <body>
  <div class="container">
  </div>
  <footer class="bs-footer" role="contentinfo">
 </body>
</html>

As you can see here. When I am activating the field "Salasana", the footer rises and blocks the text field.

Before opening the keyboard:

before

After opening the keyboard:

after

because of postion , `bottom:0px` it will always stick there at bottom — Karan Thakkar, Mar 25 '14 at 07:21

Firze · Accepted Answer · 2014-03-25T11:59:14.017

11

Solved the problem with avinash help. I ended up changing the following in my CSS. Since I have all the content inside the container div I made container height 100% - footer. I also removed bottom:0px from footer.

footer{
 position: relative;
}
html,body {
    height: 100%; /* Needed for container's min-height  */  
}

.container{
    min-height:100%;
    margin-bottom: -40px; /* Put negative height of the footer here */
    padding-bottom: 40px; /* Put height of the footer here. Needed for higher than screen height pages */
}

edited Mar 25 '14 at 11:59

answered Mar 25 '14 at 10:16

Firze

3,939
6
48
61

Did you set the position attribute of the .container { }? If so what was it? – user2101068 Jun 29 '18 at 17:34
@AdrianMadaras, this isn't the place to ask new questions. Feel free to post one of your own if it hasn't already been addressed. – isherwood Feb 25 '20 at 20:14
1

Also I want the footer to be fixed on the screen when scrolling. for that I have to use ```position: fixed;``` but is not visible since I've removed ```bottom:0px;``` – Jiya Jan 15 '21 at 18:49

score 4 · Answer 2 · edited May 23 '17 at 11:53

I found the solution posted here on StackOverflow to be pretty helpful. It includes a javascript snippet that solved the issue for me, pasting below;

if(/Android [4-6]/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
      if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
         window.setTimeout(function() {
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}

score 2 · Answer 3 · answered Mar 25 '14 at 09:48

2

Try to use position:relative or fixed

If you want your footer at bottom you should add min-height to body

answered Mar 25 '14 at 09:48

score 2 · Answer 4 · answered Oct 10 '16 at 13:18

In case you don't want to change html code, you can try fix this with JS.

We are getting current position from top, setting the top style value, and resetting bottom value.

var fixed = document.querySelector(".fixed"),
    distanceFromTop = fixed.getBoundingClientRect().top;
fixed.style.top = distanceFromTop + 'px';
fixed.style.bottom = 'auto';

score 1 · Answer 5 · answered Nov 24 '21 at 19:38

1

For a fixed position footer, I positioned it relative to top instead of bottom:

footer {
  position: fixed;
  height: 40px;
  top: calc(100vh - 40px);
  /* bottom: 0; */
}

answered Nov 24 '21 at 19:38

carlin.scott

6,214
3
30
35

score 0 · Answer 6 · answered May 23 '22 at 13:42

0

I am using use-detect-keyboard-open with React and it works perfectly.

answered May 23 '22 at 13:42

Alwin

786
9
19

score 0 · Answer 7 · answered Jun 01 '22 at 14:25

I store window.innerHeight on input focus, and reset height on input blur.

document.addEventListener('focusin', function (e) {
    if (isInputElement(e.target)) {
        document.body.style.height = window.innerHeight + 'px';
    }
})

document.addEventListener('focusout', function (e) {
    if (isInputElement(e.target)) {
        document.body.style.height = '100%';
    }
})

function isInputElement(ele) {
    return ele &&
            ele.tagName === 'INPUT' ||
            ele.tagName === 'TEXTAREA' ||
            ele.getAttribute('contenteditable').toString() === 'true';
}

How to prevent mobile keyboard from rising footer over the text fields?

Before opening the keyboard:

After opening the keyboard:

7 Answers7

Linked