fixed toolbars unfix after softkeyboard #5556

Closed
pupvogel opened this Issue Jan 29, 2013 · 12 comments

Comments

Projects
None yet
@pupvogel

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

@ghost ghost assigned arschmitz Jan 30, 2013

@arschmitz

This comment has been minimized.

Show comment Hide comment
@arschmitz

arschmitz Feb 1, 2013

Owner

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

Owner

arschmitz commented Feb 1, 2013

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

@pupvogel

This comment has been minimized.

Show comment Hide comment
@pupvogel

pupvogel Feb 2, 2013

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.

pupvogel commented Feb 2, 2013

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.

@ghost ghost assigned jaspermdegroot Mar 28, 2013

@jaspermdegroot

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot Mar 28, 2013

Member

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

Member

jaspermdegroot commented Mar 28, 2013

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

@IHNEL

This comment has been minimized.

Show comment Hide comment
@IHNEL

IHNEL Apr 5, 2013

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

IHNEL commented Apr 5, 2013

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

@harrywaters

This comment has been minimized.

Show comment Hide comment
@harrywaters

harrywaters Apr 11, 2013

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:
photo

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

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:
photo

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

This comment has been minimized.

Show comment Hide comment
@harrywaters

harrywaters Apr 12, 2013

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

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

@gewoonrik

This comment has been minimized.

Show comment Hide comment
@gewoonrik

gewoonrik Apr 20, 2013

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

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

This comment has been minimized.

Show comment Hide comment
@anujpatel

anujpatel Apr 29, 2013

I am facing kind a like issue in SIII Android mentioned at #5944
. Can JQM Team help if there is any solutions available?

I am facing kind a like issue in SIII Android mentioned at #5944
. Can JQM Team help if there is any solutions available?

@olavxxx

This comment has been minimized.

Show comment Hide comment
@olavxxx

olavxxx Sep 9, 2013

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 Sep 9, 2013

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

This comment has been minimized.

Show comment Hide comment
@olavxxx

olavxxx Feb 5, 2014

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):

  1. Click in textbox
  2. 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.

olavxxx commented Feb 5, 2014

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):

  1. Click in textbox
  2. 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

This comment has been minimized.

Show comment Hide comment
@sunil44

sunil44 May 12, 2015

this worked for me...thanks a lot

sunil44 commented May 12, 2015

this worked for me...thanks a lot

@apsdehal

This comment has been minimized.

Show comment Hide comment
@apsdehal

apsdehal May 7, 2016

Member

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

Member

apsdehal commented May 7, 2016

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

@apsdehal apsdehal closed this May 7, 2016

@apsdehal apsdehal self-assigned this Aug 3, 2016

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