We have an HTML5 webapp that needs to work on the iPad. The problem is that the page (body) scrolls up when the keyboard opens. When the keyboard is dismissed, the page remains in the scrolled up position. We need to detect the dismissal of the keyboard and scroll the page down. I have not been able to determine the event that would let me know that the user has dismissed the keyboard. We are using a WSIWIG Javascript-based HTML editor for editing content.
After more investigation I learned that iPad Safari has issues with iframes. In our case the editing area was in an iFrame, thus the issue with page scrolling when keyboard was dismissed. When we eliminated the iframe the problem is solved.
Related
I am developing an app (IOS platform) using HTML5, CSS3, angular and cordova(3.8) and stuck with an major issue.
I have a page with footer having three buttons. On click of each button a modal comes up from the bottom. Modal position is set to fixed and inside it as scroll-able container. scroll-able container contains a text area where user can input some text.
Whenever the modal comes up, text area is focused so that keyboard comes up by default. The issue is whenever native keyboard comes up webview is pushed up and entire modal gets scrolled.
I saw same issues been posted by others and I tried few solutions mentioned in reply for those questions like using ionic keyboard plugin, setting scrollTop to 0 on textarea focus. But nothing worked out.
In config.xml, I have set DisallowOverscroll to true.
It would be great helpful if someone help me with this issue ?
I have a form in a Bootstrap 3.3.2 modal.
I encounter an issue when viewing it on iOS 8 & Safari only.
This issue does not occur in Chrome or iOS 7 & Safari.
View my js bin here, http://jsbin.com/fokucu/4
After clicking "List Me", then try selecting a drop down or enter text to bring up the keyboard. After it appears, the background will scroll and you cannot scroll down the modal.
It should be noted that if the length of the table has an impact if you can scroll the modal or not without the background scrolling. Essentially more than 10 rows and you cannot scroll the modal after interacting with the form.
I cannot figure out how to solve the problem, plus I thought this was fixed in current version of Bootstrap.
Appreciate the help!
Say you've got a Xcode app with embedded web view exposing a simple HTML5 page.
This page has a title and an input tag and a nav top bar (position: fixed; top:0;).
When the user tap in it the first time, the whole screen scrolls up to enable the keyboard appears while maintaining the input tag visible, when I tap the enter button.
The issue I face is that my HTML is not restored identically (I mean, it scrolls down back, but my top bar is shifted about 10 pixels below the top edge of the screen.
But when I tap the keyboard hide button, the scrolls restore my initial view, with no issue.
Anyone experienced the issue before? Any clue of what going on or a way to work around this?
Ps: issue is present on iOS 7 (7.1.2). I didn't tested on iOS 8 as my app must support iOS 7.
I finally ended up with adding an explicit keyboard withdrawing by applying blur() the the input as follows:
<input ng-change="$(this).blur()">
This immediately makes the keyboard disappearing, while the hw initial scrolling is reversed.
I am using jQuery Mobile 1.3.0 RC1. I have a popup that I create programmatically at the bottom of my page and close after a few seconds using setTimeout (toast notification). It works very well, however if I happen to scroll the page while the popup is displayed, the popup gets scrolled too. I would like the popup not to move, i.e. stay in its position relative to the screen, not relative to the page. Is there a way to do that ?
I have tried playing with the data-position-to attribute in the HTML element, with the positionTo option of the "open" method, and tried placing the popup element inside a fixed transparent footer, none of these resulted in the desired behavior.
I had a similar problem last week. Finally solved it using modal dialog instead of popups.
For popups, I could find following.
$("#myPopup").on({
popupbeforeposition: function () {
$('.ui-popup-screen').off();
}
});
Which helped me in prevention of closing the dialog while user touched outside of popup. But scrolling issue was still there. So I changed all popups to modal dialogs. Hope it helps someone.
I have a multipage layout and if I've navigated to a page (even the first page) and the URL now has #PageNumber in it, any closing of any popup in any manner will cause the page to scroll to the top.
Obviously, this isn't ideal, and I want to know if there's anyway to stop it.