Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I managed to prevent the momentary overlay shift by setting <code>outline: none</code> on my <code>input</code> element.</p> <p>I got the wild page scrolling and disappearing keyboard to settle down by setting <code>overflow: hidden</code> on the html <code>body</code> when showing the dialog, and then removing it again when hiding the dialog. This has a nasty side effect of resetting the page's scroll position, so I save it and restore it as necessary, and wrap all this hackery in conditionals so it only runs on Android. (I hope my Android users won't be too distracted when they see the page contents change beneath the semi-transparent overlay while the dialog is open.)</p> <p>Interestingly, I was also able to prevent the wild page scrolling by catching the <code>touchstart</code> event on my overlay element and calling preventDefault(). This makes me wonder if all this madness was caused by a sequence of events like this:</p> <ul> <li><code>touchstart</code> bubbles up to the document root</li> <li>browser sees <code>touchstart</code> where the duplicate input field was placed</li> <li>browser gives focus to the input field</li> <li>soft keyboard appears to allow typing in the input field</li> <li>viewport gets resized to accommodate the soft keyboard</li> <li>resized viewport during touch event looks like a touch drag to the browser</li> <li>spurious drag causes the page to scroll and dismisses the keyboard</li> </ul> <p>I didn't end up catching <code>touchstart</code> to solve the problem, because it prevented the input field from gaining focus, and calling <code>focus()</code> from javascript just didn't work. I have read that the Android browser disables the <code>focus()</code> method on input fields, which would explain this behavior. Perhaps it does this because it wouldn't work with the duplicate text widgets it creates over the html-defined fields.</p>
    singulars
    1. This table or related slice is empty.
    1. POHow can I prevent wild scrolling when a fixed position text input form field gains focus?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USʇsәɹoɈ
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow can I prevent wild scrolling when a fixed position text input form field gains focus?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COgreat answer and thanks for sharing!
      singulars
      1. PO
      1. USmcloud79
    2. COThanks for the comprehensive answer. I ran into this and was baffled as to what was going on. Completely saved the day. Also I found that add this css to the inputs fixes the duplicate input field `-webkit-user-modify: read-write-plaintext-only; -webkit-tap-highlight-color: rgba(255,255,255,0);`
      singulars
      1. PO
      1. USAlex
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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