Bootstrap fixed footer moves

Question

I am developing an application with Angular JS, Bootstrap and Jquery. I have created a fixed footer which works as expected throughout the application. but when i click on an input box on mobile browser the footer moves to the screen center.

here is the css :

.footer{
    bottom: 0;
    padding: 10px 15px;
    position: fixed;
    width: 100%;
}

I tried changing the footer properties to position:absolute and display:none on input focus. here is the code for it :

$(document).on('focus', '[type=text], [type=password], [type=number]', function (e) {
    $(".footer").css("position","absolute");
    $(".footer").css("display","none");
});

$(document).on('blur', '[type=text], [type=password], [type=number]', function (e) {
    $(".footer").css("position","fixed");
    $(".footer").css("display","block");
});

It works on few devices like Iphone 5 and 5s but no success on others like Ipad, Iphone 4 etc. Any help would be much appreciated.

Can you add your jquery you applied on click of a particular input box? — prady00, Mar 12 '14 at 14:40
It's possible that the footer is moving because when you focus the input, the browser resizes the viewport to display the soft keyboard. The resized viewport means that the new value of `bottom` is smaller than previous value. Also, don't forget other HTML5 input types like "email", "tel", etc. :) — Palpatim, Mar 12 '14 at 14:58
This is something interesting.resized viewports, any way i can handle this change? — Sanjay D, Mar 12 '14 at 18:17

score 1 · Answer 1 · edited May 23 '17 at 11:54

I find that footers with position: fixed often don't behave the way you would like. I don't know how you build up your HTML but you could consider using position: absolute.

In the pen below I made a small example of what I usually do when I need a fixed footer at the bottom of the page.

https://codepen.io/Rennie/pen/dvVGGJ

I would not recommend using Javascript/JQuery to fix a styling issue, especially not JQuery since this is not the 'Angular way'. See "Thinking in AngularJS" if I have a jQuery background? as why.

Bootstrap fixed footer moves

1 Answers1