StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>After hours of research I found a better solution, so I thought I'd share.</p> <p>There is a bug in iOS 5's contentEditable implementation where the main scrollView will not scroll with the caret. If making the body tag (or any dynamically sized element) contentEditable, the caret will always go off screen.</p> <p>If you set an editable div to overflow: scroll, you'll notice that <strong>the div will scroll</strong>. The div's scrolling doesn't "bounce" or have scroll bars by default, but you can apply the <code>-webkit-overflow-scrolling: touch</code> attribute to the div to fix this.</p> <p>With this information, you can fix it with a wrapper like so:</p> <pre><code><!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> <style type="text/css"> html, body {height: 100%;} body { margin: 0; } #wrap { height: 100%; width: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; } #editor { padding: 10px; } </style> </head> <body> <div id="wrap"> <div id="editor" contenteditable="true"> </div> </div> </body> </html> </code></pre> <p>Basically you are scrolling the div instead of the document.</p> <p>Unfortuantly the div's "scrollView" isn't aware of the virtual keyboard, so the caret will disappear behind the keyboard. However, you'll notice that the caret position is still on screen at the bottom behind the keyboard. So to fix that, reduce the height of the div/UIWebView to accommodate the keyboard.</p> <p>Something else you might want to do is disable scrolling on the main scrollView:</p> <pre><code>webView.scrollView.scrollEnabled = NO; </code></pre> <p>The main scrollView shouldn't scroll anyway, but it should prevent any scrolling glitches.</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