Problems with placement of the q-input textarea cursor (when form is inside MODAL)



  • Whether I am inside a cordova app or in mobile Safari, there are a number of cursor and typing problems with the textarea q-input type. Sometimes the cursor is outside the field, sometimes typing is blank (and then shows up a few seconds later). Is anyone else having these problems? They are worse on ios11 than they are on ios 10.3, but both platforms suffer problems with this input.



  • I have tracked this down to the form existing inside a modal. If it is NOT in a modal, this cursor input problem does not happen. Anyone else seeing this? Any advice on how to mitigate??



  • In case it helps someone else, I have a fix. Fortunately, when a modal is open, the body tag gets a with-modal class. Although it is set to have overflow hidden, it was NOT set to fixed position, which fixed (pun intended) my problem.

    .with-modal {
    position: fixed !important;
    }
    

    et Voila! One small side effect (which does not bother me, but might bother some) is that the page will scroll to the top when setting position fixed, and will not return to its position when closing the modal.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.