Bootstrap 3 mobile keyboard unlocks navbars

Question

I have navbars on my site using bootstrap 3 (header and footer).

The navbars work perfectly for all navigation, until the iOS keyboard is brought up. When the keyboard is brought up, it un-fixes the position of the navbars and makes them appear static (you can scroll them around and they just look like they're overlayed on the page).

Sample Footer code:

<div class="footer navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid"></div>
    <div class="navbar-header"><div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2" style="height: 1px;">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <div class="btn-group dropup" style="width:100%;">
          <!--somestuff-->
          </div>
        </li>
      </ul>
    </div>
</div>

Whats the best way to handle this?

score 2 · Answer 1 · answered Aug 11 '14 at 19:37

2

this is lightly covered here: http://getbootstrap.com/getting-started/#support-fixed-position-keyboards

Virtual keyboards

Also, note that if you're using inputs in your modal or navbar, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to position: absolute or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.

Here's an example of the "transforming your elements to position: absolute" approach:

http://dansajin.com/2012/12/07/fix-position-fixed/

answered Aug 11 '14 at 19:37

Jeremy Danyow

26,470
12
87
133

the 2nd link doesn't appear to work – Andrew Aug 11 '14 at 19:41
weird- it's working for me, let me know if it continues to not work. – Jeremy Danyow Aug 11 '14 at 19:46
It may be my network. This guided me in the right direction, but I ended up following another posts' answer since it was covered there for exactly what I needed. Thanks! – Andrew Aug 11 '14 at 19:52

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

I ended up following the answer here: https://stackoverflow.com/a/23860205/1612605

Just hiding my siteContent, which resolved the issue. since there's no content to scroll around to while editing text. I could also include it to remove my header as well, but for now that's not causing an issue so I'll leave it in.

$(document).on('focus','input, textarea, select',function() {
    setTimeout(function() {
        $('#siteContent').hide();
    },20);
});
$(document).on('blur','input, textarea, select',function() {
    setTimeout(function() {
        $('#siteContent').show();
    },10);
});

makes sense, nice approach – Jeremy Danyow Aug 11 '14 at 19:56 — Jeremy Danyow, Aug 11 '14 at 19:56

Bootstrap 3 mobile keyboard unlocks navbars

2 Answers2