CODEWITHSUNDEEP
jqueryiphoneioscssjquery-mobile
dommer
dommer

Reputation: 19810

Why is jQuery Mobile fixed toolbar not fixed in Mobile Safari?

I'm having a problem with a jQuery Mobile site. There's a toolbar that's fixed to the bottom of the screen using

<footer data-role="footer" data-position="fixed" data-tap-toggle="false">

However, on an iPhone, it seems to leap up when the keyboard appears - and it leaps up higher than the keyboard, so there's space between the bottom of the toolbar and the top of the keyboard.

To see the effect, you go to the following URL on an iPhone/Mobile Safari:

http://goo.gl/F4blB

Click on the "Join Lecture" button and then, on the next screen, start typing in the text box. You should see the toolbar leap up above the keyboard. Note that it works fine on the desktop, so be sure you are on an iPhone to see the problem.

This seems to be related to the length of the content on the page. If there's only one or two lines of content, it's OK. It's only when the length of the page grows that the problem appears.

There's no problem in Chrome, even when the window is resized to be as small as an iPhone window.

We're using jQM 1.3.0 and jQuery 1.9.1. Latest version of iOS.

Any idea how the toolbar can really be fixed?

Upvotes: 2

Views: 2805

Answers (2)

Sheetal
Sheetal

Reputation: 1366

Use this:

https://github.com/jquery/jquery-mobile/issues/5532

$('input, textarea') .on('focus', function (e) { $('header, footer').css('position', 'absolute'); }) .on('blur', function (e) { $('header, footer').css('position', 'fixed'); //force page redraw to fix incorrectly positioned fixed elements setTimeout( function() { window.scrollTo( $.mobile.window.scrollLeft(), $.mobile.window.scrollTop() ); }, 0 ); });

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

It is a bug in jQuery Mobile.

You will need to fix jQuery Mobile code by yourself. Start by searching for this code line:

if( screen.width < 500 && $( e.target ).is( o.hideDuringFocus ) && !$( e.target ).closest( ".ui-header-fixed, .ui-footer-fixed" ).length ){

And change screen.width < XXX to accommodate larger screen devices.

More info about this problem can be found here, in its official ticket: https://github.com/jquery/jquery-mobile/issues/4113

Upvotes: 2

Related Questions