CODEWITHSUNDEEP
iosjquery-mobilecordova
user2412555
user2412555

Reputation: 1055

JQuery-mobile, Phonegap, iOS, fixed header jumps after leaving input form

I am using Phonegap with JQuery-mobile, Phonegap on iOS. I encounter this problem with header jump to the middle when leaving form input.

I already set data-hide-during-focus="true" on both fixed header and footer. This problem is killing me.

Upvotes: 5

Views: 3817

Answers (3)

Aadil Keshwani
Aadil Keshwani

Reputation: 1386

I had the similiar problem i was using 1.0.1 and the major issue was arising in of header jumps was in older 2.3 version of android and even in Google Nexus phone. I have searched internet for more and more than after some R&D i realize it was basically mistake of css Below what i have done to solve it

  1. Give your header class “.header” of each page
  2. Create css class with following code
  3. .header{ border: 0px; position: fixed; width: 100%; top: 0px; left: 0px; z-index: 21; }

Besides if you are facing any issues where the header jumps down after changing the page then add this code $.mobile.silentScroll(0); in $("#yournextpageid").live("pageshow", function() { $.mobile.silentScroll(0); }

What Jquery data-position="fixed" does is it dynamically adds top position to its header and it has overhead and proves to be very sticky in some devices. Besides it jumps in certain devices on opening the keyboard. Adding above CSS will solve your problems.

Upvotes: 0

user2578911
user2578911

Reputation: 1

in Config.xml change the line to false it will solve your problem..

Upvotes: -1

Amit Prajapati
Amit Prajapati

Reputation: 14315

If we have only one header bar then we can follow the code only for the main-headerbar.

    $(document).on('focus', 'select, input, textarea', function () {
        $('#main-headerbar').css({'position': 'absolute', 'top': '0px' });
    });
    $(document).on('blur', 'select, input, textarea', function () {
        $('#main-headerbar').css({ 'position': 'fixed' });
    });

If we have two header bars and Second-headerbar will be shown underneath the Main-headerbar (If main-headerbar’s height is ’47px’ then set top style for the second-headerbar, top : 47px).

$(document).on('focus', 'select, input, textarea', function () {
    $('#main-headerbar').css({'position': 'absolute', 'top': '0px' });
    $('#Second-headerbar').css({ 'position': 'absolute', 'top' : '0px' });
});
$(document).on('blur', 'select, input, textarea', function () {
    $('#main-headerbar').css({ 'position': 'fixed' });
    $('#Second-headerbar').css({ 'position': 'fixed', 'top': '47px' });
});

OR follow iOS fix for position fixed elements on input

Upvotes: 3

Related Questions