No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    4
    6
    2024
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ssuess
      ssuess last edited by ssuess

      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.

      1 Reply Last reply Reply Quote 0
      • ssuess
        ssuess last edited by

        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??

        1 Reply Last reply Reply Quote 0
        • ssuess
          ssuess last edited by ssuess

          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.

          D 1 Reply Last reply Reply Quote 1
          • D
            derrickbass @ssuess last edited by

            @ssuess said in Problems with placement of the q-input textarea cursor (when form is inside MODAL):

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

            Thanks for finding and sharing this. It seems to work well.

            1 Reply Last reply Reply Quote 0
            • P
              pedrolucas last edited by

              Thanks about this 😉

              1 Reply Last reply Reply Quote 0
              • benoitranque
                benoitranque last edited by

                Doesn’t position: relative also fix the problem?

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post