fixed toolbars unfix after softkeyboard

pupvogel commented 11 years ago

This issue seems to be related to #5514 and #5532, but I wasn't so sure...

On both my phones (iOS6.1 and Android 2.3.4) the fixed header and footer will "unfix" as soon as the softkeyboard or the OS's selectmenu appears. After editing, they won't "refix", but scroll up and down with the contents.

http://jsbin.com/onibuc/84

arschmitz commented 11 years ago

can you check this now #5532 has been fixed and i believe it should fix this as well

pupvogel commented 11 years ago

I'd say almost:

on iOS it' perfect now.
on my android it's still a little strange: after finishing an entry the keyboard disappears, while still keeping a blinking cursor in that input field...as if the field still expects text entry without the keyboard. header and footer are not refixed in that state, even though the user can already scroll to somewhere else on the form. if i do a single tap on an area BETWEEN the input fields, header and footer will re-fix.

jaspermdegroot commented 11 years ago

I looked into this today and noticed hideDuringFocus doesn't work on Android 2.3 (tested on 2.3.6)

IHNEL commented 11 years ago

Unbelivable. I am using jquery 1.3.0 within Cordovar 2.5, Same error. Did you complete fix it?

harrywaters commented 11 years ago

Hi

I am seeing 2 issues similar to this on iOS 6.1.3, using jQuery Mobile 1.3.1.

a) Opening a select menu which is inside a fixed header AFTER scrolling down the page - the fixed header does not hide, but unfixes itself and displays in the middle of the screen (Only seems happens on iPhone/iPod Touch running iOS 6.1.3).

See demo here: http://jsbin.com/ejuzov/1/

Image: photo-1

b) The fixed header unfixes and appears in the middle of the page after closing the soft keyboard (by clicking out of the keyboard, NOT by closing it using 'Go' or the close keyboard button) on iPad running iOS 6.1.3. It only seems to happen when the content section of the page is not taller than the viewport. (may also happen on iPhone/iPod when the content is smaller than teh viewport, not tested though.

Follow instructions in demo here: http://jsbin.com/eqoyij/1/

Image:

To get rid of this issue I have tried to disable hideDuringFocus for the header bar, but it always seems to disappear on iOS, even when this has been set:

$("#header").fixedtoolbar("option", "hideDuringFocus", "");

Regards, Harry

harrywaters commented 11 years ago

Apologies, I think (b) above is already being looked at in Issue #5532

gewoonrik commented 11 years ago

I've got the same problem on Android (in this case 4.2). The fixed header shows strange behaviour, like breaking in two pieces (screenshot) , during usage of the keyboard and even after hiding it. Screenshot_2013-04-20-15-10-49

anujpatel commented 11 years ago

I am facing kind a like issue in SIII Android mentioned at https://github.com/jquery/jquery-mobile/issues/5944 . Can JQM Team help if there is any solutions available?

olavxxx commented 11 years ago

I also face a "unfix" of the top toolbar, while keyboard appears. Most of the time, it fixes back.. Some times I have to click several times on the document, to refix it.

But some times, it doesent. I see the class gets added: ui-fixed-hidden It goes through "in" and "out" classes (animation I guess).

This also happends in Google Chrome on desktop.

EDIT: The problem is the toggle functionality, even with data-tap-toggle="false", it toggles. With data-tap-toggle="false" , it seems to reactivate, but it still unfixes and flashes.

Eg. if I put focus on an input field and then scroll, the fixed toolbar scrolls too. If I then remove the focus (click on document), it refixes...

Using latest stable JQM and JQuery 1.9.1

EDIT 2: Its related to focus. When a form or an input gets focus, I guess some JQM code triggers and changes the fixed toolbar to ui-fixed-hidden?

EDIT 3: $("[data-role=header]").fixedtoolbar({ hideDuringFocus: "" });

This solved my problem.. But in the manual, it says: A list of jQuery selectors that should cause the toolbars to hide while focused, except if they are in a fixed toolbar.

So this is it for my problem, the bug seems to be that it doesent respect that the header is a fixed toolbar. If I set this property through JS though, it no longer happends.

olavxxx commented 10 years ago

Hello again, this workaround that I provided for JQueryMobile 1.3.2 (EDIT 3) does not work with JQueryMobile 1.4.

To make the 1.4 work, you need: data-role="header" data-position="fixed" data-tap-toggle="false" data-hide-during-focus="false" data-theme="b"

Hope this can help someone, as you dont really need to "hack" it if you have the "data-hide-during-focus" to false. Some report you need to explicit set data-theme too, even if using default theme.

Ps. Tested on Chrome (Android). The way to test if it's working or not: Add content so that you need to scroll: img height="2000px"

Then, on the top of your page, you should have a fixed header and a fixed footer. To test this, you have to do this (excactly):

Click in textbox
when keyboard comes up, do not click outside of the keyboard, use the "keyboard down" or "back" key on the android phone. (This will not trigger any events). Then try to scroll.

If you can scroll with that use case and they stay fixed, it should be fine, AFAIK.

sunil44 commented 9 years ago

this worked for me...thanks a lot

apsdehal commented 8 years ago

Issues seems to be fixed in latest jqm version, not able to reproduce. If issue still persists, kindly reopen.

jquery-archive / jquery-mobile

fixed toolbars unfix after softkeyboard #5556