Hover text overlapping the input field in mobile view

  • Profile Image
    slobcorg
    Asked on September 11, 2017 at 04:14 PM

    The toasts for Name and date are hiding the fields and make it very difficult to enter data.  I deleted the toasts, but in past they helped keep people from messing up section 2 of form.

    See attached screenshot.

    Vickie Backman

    Slobc.org

    At century-registration@slobc.org

     

  • Profile Image
    jonathan
    Answered on September 11, 2017 at 05:03 PM

    I test your form on a mobile browser but I could not see the issue anymore.

    If I understand correctly you were referring to the Hover Text in the name field that was blocking the input field in mobile view.

    Example:

     

     

    But I do not see the hover text in the field anymore at this time on your form. You must have removed it already and it had resolved the issue.

    Please let us know if you require further assistance.

  • Profile Image
    slobcorg
    Answered on September 11, 2017 at 05:17 PM

    As I said, I removed them!!   They were directly in the way and prevented use of the fields. Your people should try setting up a form with name and looking at it on a Galaxy S5.  I don't expect that you are going to code a proper change to this issue this minute, just informing you of a problem.

    I need the form working right now, and I fixed it in a very drastic way, remove the problem.

     

  • Profile Image
    jonathan
    Answered on September 11, 2017 at 05:42 PM

    We apologize for any inconvenience caused. Actually the hover text description can also be re-positioned in the form using custom injected CSS codes. It can be positioned in a way it will not be blocking the input field even when using mobile browser.

    I will make a test of the custom CSS code needed so it will work on your form. I'll get back to you as soon as I have the solution.

    Thank you.

  • Profile Image
    jonathan
    Answered on September 11, 2017 at 05:55 PM

    I was able to come up with the correct CSS codes needed. 

     

    @media screen and (max-width: 480px){

    #id_40 div.form-description {

     

        right: -30px !important;

        top: -40px !important;

    }}

     

    result:

     

    You can also try my test form on your mobile device browser https://www.jotform.com/72536630152956

    Let us know if you need help with this resolution.