GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
Already on GitHub? Sign in to your account
I have a typical user registration form (username, password, confirm password, email, confirm email) put inside a panel, when the panel initially opens, all works perfectly fine, touching each text box will focus the corresponding text box correctly.
However, once added validation (http://docs.jquery.com/Plugins/Validation) to the form, and if any text box is invalid, the form's length becomes longer inside the panel with a new label created right underneath the invalid content text box), at this point, touch event will focus the wrong text box. E.g. Touching the lowest text box, will actually put the focus in the next one up on the form, etc.
Another issue is, when scrolling this now lengthened form to the very bottom, and clicking on the bottom-most part of the page, not the panel, the panel won't be closed anymore.
It is as if the lengthened form is still thinking it is of the old height, and hence touch coordinates get mapped to incorrect control, and also touching the main page at the very bottom (the lengthed bit) won't trigger panel close anymore.
Thank you very much for your attention. I hope this description makes sense to you.
Some more info, I am having this issue in webkit (phonegap wrapped), I noticed some dead space at the bottom of the panel, after the panel gets lengthened, and after the soft keyboard gets hidden, on Android.
Thanks for reporting the issue. Please provide a simple test page that reproduces the issues you mention. See contributing guidelines.
Have to see a test page to get a good picture of the issue, but maybe we can fix this by binding positionPanel() to the updatelayout event.
Thanks for the reply. Please refer to http://game.nekomobi.com/panel/
If you click the top right grid like icon, then click signup, it will bring you to the signup screen, don't type anything, just click submit. All text boxes will be invalidated, a new label will be created under each text box. At this stage, the panel has increased in height, and if you scroll all the way down this lengthened panel, and touch on say the last text box on a mobile browser (I tried Chrome), focus will sometimes go to the second last text box. You'll also notice a dead area near the bottom, always on the page side, sometimes also on the panel side. If you click this dead area on the page side, it won't be able to close the panel when clicked.
@ivan-yu Please refer to the contributing guidelines https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md as @ugomobi said in there you will see we need a simplified JSbin test page there is a template in the contributing guidelines We need a jsbin so that we can easily see the exact code and markup you are using and make changes if need. it also insures that the page does not change while or before we get a chance to look.
Apology on that, please refer to http://jsbin.com/onibuc/52/
Same test page, but I put links to latest code back in there. Also moved the grid button to the left because the "edit in JS Bin" label is in the way: http://jsbin.com/onibuc/53
So far so good! I'll will rebuild the phonegap wrapper as well to test it out.
Can you actually reproduce the issue with latest code, because I can't. You said you tested Chrome. On what OS?
Although I couldn't reproduce it with your test page I do see a possible issue with dynamically adding content to a panel.
I just committed a fix for this. I bound the panel to the "updatelayout" event and made it call the positionPanel function when this event is fired. The positionPanel function will check the height of the panel contents.
See more about the "updatelayout" event here: http://jquerymobile.com/test/docs/api/events.html
So whenever you dynamically add content to a panel that affects its lenght you should trigger this event on the panel. I added it to the errorPlacement function on your test page: http://jsbin.com/onibuc/57/edit
We will also add this information to the API documentation.
Thank you! The issue is resolved with the latest code + triggering updateLayout. It is working now in Android webkit (phonegap). That was where I experienced the issue with the old code. Now it works!
I am glad it resolved your problem.
Note: On your test page I added the trigger updatelayout code to the errorPlacement function, just as a quick example. That function is called after each input that didn't pass validation. It would be better for performance if you trigger the event only once, after all inputs have been validated.
Panel: Do not scroll to top upon updatelayout