Fixed Header Issue.

[danstanhope]

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]

Is this only when using fixed headers?

[danstanhope]

Hey Todd,

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

Thanks a lot.
Dan

[toddparker]

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

[danstanhope]

Hey Todd,

Yup -- iOS 4.2.1

Thanks again,
Dan

[skris]

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

[toddparker]

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

[toddparker]

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

[toddparker]

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]

probably too late, but here's a fiddle... http://jsfiddle.net/agcolom/AYZNd/1/ ;-) tried on iPad2 and can't reproduce the problem... will check on iPod Touch...

[agcolom]

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

[agcolom]

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 http://users.cscs.min.ac.uk/~coloma/jqm/photo-6.PNG and http://users.cscs.wmin.ac.uk/~coloma/jqm/photo-7.PNG

[agcolom]

I've updated the jQuery version in the fiddle and still the same thing happens: http://jsfiddle.net/agcolom/AYZNd/3/show/

[toddparker]

Thanks!

[robmaas]

Any update on this one?

[toddparker]

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.

http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

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 $.mobile.fixedToolbars.show();. To have them appear immediately without the fade:

$.mobile.fixedToolbars
.show(true);

[robmaas]

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 )

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

[toddparker]

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:
http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

[wturnerharris]

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]

@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

http://jquerymobile.com/test/docs/toolbars/bars-fixed-options.html

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" });

[wturnerharris]

@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]

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]

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]

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

[raghvendra1501]

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]

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

[raghvendra1501]

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]

@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.

[raghvendra1501]

Hi,
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. http://expin.me/raghvendra (With fixed header issue)
2. http://expin.me/rishabh (Without issue)

Check it on android L and android J chrome browser.

[arschmitz]

@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.