Fixed Header Issue. #1087

danstanhope opened this Issue Feb 15, 2011 · 29 comments


None yet

When a user clicks a text box, the virtual keyboard appears. This pushes up the fixed footer, when you click "done", the keyboard slides down. The header now appears in the middle of the page. It should be at the top.

It'd be great if there was a similar method to "refresh" but for the headers and footers. So, should something happen whereby they get positioned incorrectly, the developer can force them back.

Thanks for everything and keep up the great work :)


toddparker commented Feb 15, 2011

Is this only when using fixed headers?

Hey Todd,

Yeah, as far as I can tell -- only appears when using fixed positioning.

Thanks a lot.


toddparker commented Feb 15, 2011

Thanks, we'll take a look. Is this on iOS 4.2?

Hey Todd,

Yup -- iOS 4.2.1

Thanks again,

skris commented Jun 13, 2011

As far as I can see, this is still an issue and occurs on all iOS > 4.2


toddparker commented Jun 13, 2011

I think this was accidentally closed when danstanhope commented.I really wish I could get rid of the "comment and close" button!

toddparker reopened this Jun 13, 2011


toddparker commented Sep 22, 2011

Can someone post a test page on jsbin or jsfiddle using the latest?


toddparker commented Oct 18, 2011

I just tested this and it seems to be working fine. Closing as fixed but we can re-open is someone posts a jsbin using latest that shows this still acting odd on iOS4.


agcolom commented Oct 18, 2011

probably too late, but here's a fiddle... ;-) tried on iPad2 and can't reproduce the problem... will check on iPod Touch...


agcolom commented Oct 18, 2011

ok, can reproduce.... pictures coming in a minute.... happening on the iPad2 and iPod Touch...


agcolom commented Oct 18, 2011

ok, so I've a page with a form that is longer than the screen. I go the the last input field, the soft keyboard comes up, the screen moves up and the header bar gets positioned there. I dismiss the soft keyboard and the page moves back down slightly but the header bar does not get repositioned unless you scroll the page.

See linked pictures: at and


agcolom commented Oct 19, 2011

I've updated the jQuery version in the fiddle and still the same thing happens:


toddparker commented Oct 19, 2011


robmaas commented Nov 23, 2011

Any update on this one?


toddparker commented Nov 23, 2011

The current fixed toolbars are in the process of being re-worked for 1.1 but in the meantime, you can try using the show() method to force them to re-position the bars on blur.

If the height of the page changes, either through dynamic injection of markup, or by widgets that hide or collapse content, it can throw off the dynamic positioning of the toolbars. To manually tell the toolbars to re-position themselves then fade in, use $;. To have them appear immediately without the fade:


robmaas commented Nov 28, 2011

Thanks for the reply, i tried the '.show()' method aswell as .page() and .trigger('updatelayout'). All of them seem to do something, but not the desired effect. If you're taking a look at this issue make sure you test this with a transition 'slide' to another page, the fixed header will come down a bit before the animation starts, which will leave a white space above the header during transition.

Note: This problem only occurs on iOS devices.

I'm having an android issue tho, sometimes the footer will come up when the keyboard opens which decreases the limited view even more and the footer doesn't jumps down whenever the keyboard get's hidden. (which is a reported issue #861 )

Looks like this issue is occuring on Android too, but in smaller scale..


toddparker commented Feb 15, 2012

We've anded new fixed toolbars for 1.1 that now auto-hide when you focus into any form element on a page that would open the keyboard, then restore them on blur:

toddparker closed this Feb 15, 2012

hmm. Using 1.1.0 final and I have this issue, on both Android and iOS. Clicking a textarea will fly in the keyboard and flyout the header, which should remain onscreen. Anyway to prevent this default behavior?


toddparker commented May 14, 2012

@wturnerharris - This is a feature because there is limited screen real estate on mobile devices and the fixed toolbars can obscure the inputs + on-screen keyboard on certain devices and orientations. You can control this via hideDuringFocus

hideDuringFocus string
default: "input, select, textarea"

A list of jQuery selectors that should cause the toolbars to hide while focused, except if they are in a fixed toolbar.

$("[data-role=header]").fixedtoolbar({ hideDuringFocus: "input, select, textarea" });

@toddparker - I understand the feature now. Makes sense for iPhones where the screen is mad small, but Android's giant screens make this irrelevant imho.

For anyone else wanting to override this feature (I could not override using the hideDuringFocus option), I simply set a live blur event for textarea and set window.scrollTo(0,0), which puts it back to the top. There's a slight glitch for Android 2.3, but it's livable.

gnesher commented Aug 14, 2012

I have disabled the fixed-header hiding ($("[data-role=header]").fixedtoolbar({ hideDuringFocus: ""}); but I still experience this problem, the page seems to scroll down a bit to focus on the element - hiding the header.

I'm using IOS 5.1 running either on fullscreen mode or under phonegap.

bertvh commented Aug 28, 2012

For me, on Android 3.1 (tablet), the footer does not disappear when the keyboard comes up. The footer slides up with the keyboard and obscures the input field that the keyboard is controlling.

Not sure how to fix this. I did notice a check for the screen size in the code that controls the hiding/showing of the footer but this doesn't seems to be the issue.

Any suggestions? Thanks.

gnesher commented Aug 28, 2012

I've simply abandoned jQuery mobile, performance hit is just too big

For chrome browsers just include
-webkit-backface-visibility: hidden;
in the css of the element which is fixed. I tried most of the solutions but this worked at last

Ruffio commented Dec 17, 2014

@raghvendra1501 On which device(s), Android version and Chrome version is this an issue on? Have you got a test page demonstrating the issue?

I don't have test page . its in a product . I was using default chrome browser of the latest android L version . The issue was also in android jelly bean. When I scroll down a page with fixed header, the fixed header was also coming down with the scroll .The issue got resolved by including the css property mentioned in previous comment.

Ruffio commented Dec 17, 2014

@raghvendra1501 It would be very helpfull if you can make a test page that demonstrates the issue, so it can be verified by the jQM team and corrected. That will help a lot of people.

Sorry for delayed response. I was caught up in some work. Here is a demo . I am sending here two URLs . On the first the issue is there , and on the other , there is no issue.

  1. (With fixed header issue)
  2. (Without issue)

Check it on android L and android J chrome browser.


arschmitz commented Jan 13, 2015

@raghvendra1501 @Ruffio we will be deprecating the functionality to hide headers and footers on focus in the next release because its simple not possible to due properly across devices. We will be adding demos showing how to do this in an application specific manner when it is supported by the devices you need.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment