Support Article
Text Input in iOS Safari is pushed off screen when focused
SA-17148
Summary
When the user clicks on the Manufacturer (auto-complete control) field from an iOS device, the UI zooms in on that field displaying the keyboard. The field is pushed under the address bar. If the user types, the field displays.
Error Messages
Not Applicable
Steps to Reproduce
1. Create a section with an auto-complete and set it as required.
2. Refer it in a harness and the harness in a portal.
3. Launch the portal in Chrome and click F12.
4. Choose the Chrome mobile emulator and choose Apple iPhone 6 as the device.
5. Click on the auto-complete field.
Root Cause
The reported behavior is a know issue in iOS devices.
Resolution
As a local-change, add the below code snippet in UserWorkForm.
<script>
function scrollToTopDelay(e) {
setTimeout(function() {
scrollToTop(e);
}, 500);
}
function scrollToTop(e) {
var target = e.target || e.srcElement;
var dataCtl = target.getAttribute("data-ctl");
var isAC = false;
if (dataCtl) {
var json = JSON.parse(dataCtl);
if (json && json.length > 0) {
isAC = (json[0] == "AutoCompleteAG");
}
}
if (window.parent && window.parent.document && window.parent.document.body && isAC) {
var parentBody = window.parent.document.body;
- parentBody.style.overflow = "auto";
- parentBody.scrollTop = 0;
}
}
$(document).ready(function() {
var isAppleDevice = (/iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase()));
if (isAppleDevice) {
$(document.body).on("tap", scrollToTopDelay);
}
});
</script>
Published January 31, 2016 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.