StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>So the answer is, I was wrong about not being able to detect the window.innerHeight change.</p> <p>The reason I couldn't detect the change was because on the iPad the keyboard animates up from the bottom and does not fire a window resize event. My solution was not to detect the window size, I made the body have a max-height of 100% when the modal is open. Then I wait for the user to focus on the text field and manipulate the scroll position at that point:</p> <pre><code>$(document.body).on('focus', '.input-field', function(){ setTimeout(function(){ window.scrollTo(0, $('#modalInput').offset().top - 100); }, 0); }); </code></pre> <p>This is for when you focus on your input field. iOS likes to try to center the window on the field when the keyboard opens, and that can be annoying if say you have information above the input the user needs to see. The example above scrolls the window so that my text field is right above the keyboard. You'd think that's all you need to do, but iOS sometimes tries to be too smart. When the user starts typing in the input, it re-centers on the input again! So we take the above code and make it into this:</p> <pre><code>$(document.body).on('focus keyup', '.input-field', function(){ setTimeout(function(){ window.scrollTo(0, $('#modalInput').offset().top - 100); }, 0); }); </code></pre> <p>This way the scroll position never changes from where you want it while the user is typing.</p> <p><strong><em>Note</em></strong>: The only time I was able to detect the change in window.innerHeight was in the on keyup event because at that point the keyboard was done animating and fully shown on the page. On focus it still said the innerHeight was same as without the keyboard.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload