Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jaco Burger
Jaco Burger
20,807 Points
Posted by Jaco Burger
Jaco Burger
20,807 Points

Mobile - Fixed header jumps down when keyboard opens on focus.

This is an annoying issue. I've got a fixed header that jumps out of position on mobile whenever I click on a form and the virtual keyboard loads. Any ideas how to fix this?

Jquery or preferably CSS solution.

Thanks!

2 Answers

Jaco Burger
Jaco Burger
20,807 Points
Jaco Burger
Jaco Burger
20,807 Points

Thanks Andrew.

I found a way around it. Here it is for future reference if anyone has a similar issue. First you need Modernizr to pick up touch devices. Then via jquery you target the wrapper that is fixed, and change it to be Absolute while focused, and revert to fixed when off.

.headerfix {
        position: fixed;
        top: 0px !important;
        width: 100%;
        background: #fff;
        z-index: 999;
}

.fixfixed .headerfix {
    position: absolute !important;
}

The script:

jQuery.noConflict();
(function($) {

    jQuery(function() {

        if (jQuery('html').hasClass('touch')) {

            /* cache dom referencess */ 
            var $body = jQuery('body'); 

            /* bind events */
            jQuery(document)
            .on('focus', 'input', function(e) {
                console.log('focus on input');
                $body.addClass('fixfixed');
            })
            .on('blur', 'input', function(e) {
                console.log('blur out of input');
                $body.removeClass('fixfixed');
            });

        }

    });

})(jQuery);
Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Yeah that looks about right. I have changed the best answer to be your comment since it does in fact proved an answer.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Jaco, I can't be 100% sure but I believe this a a common bug with iOS. Generally though, you don't want to have fixed elements on a mobile device since there is limited space. I would recommend changing all your fixed elements to static on mobile devices.