Hover text is overlapping the address fields?

  • Profile Image
    kranai
    Asked on March 03, 2016 at 12:29 PM

    Hi

    okay that is sorted...now u look at hover text on Street Address (there are 2 occurrence) hover text is overlapping the filed...is this a cause of concern if somebody typing the text and the hover will not go away as it is suppose to display if mouse is on Address field.

     

    rgds

    kish

  • Profile Image
    Charlie
    Answered on March 03, 2016 at 12:47 PM

    I believe the hover text was designed to be a guide while users are typing or while the mouse cursor is on the active field. I believe it would defeat the purpose if it suddenly hides when users are typing.

    You can use this custom CSS code instead for the two addresses:

    #id_5 > div.form-description, #id_18 > div.form-description {

        position : absolute !important;

        right : -50px !important;

    }

     

    That should move the hover text a little to the right. Let us know if that works.

  • Profile Image
    kranai
    Answered on March 03, 2016 at 01:04 PM

    well this solved it but created another now look at the hover text on the department field it is completely  covered...need to shift right again for this hover.

  • Profile Image
    Charlie
    Answered on March 03, 2016 at 01:23 PM

    That's odd. My cloned form did not show that problem.

    Try these steps to fix it:

    1. First, delete this CSS code:

    2. Then replace it with this one:

    #id_20 > div.form-description {

        position: absolute !important;

        right: -80px !important;

    }

    You can adjust it appropriately. Here's my clone form: https://form.jotform.com/60625223959965.

    Let us know if you need further adjustments on this.

  • Profile Image
    kranai
    Answered on March 03, 2016 at 01:39 PM

    Hi

    okay I adjust till was okay

    but now the word card from Credit is on new line ....new to be on the same line

    kish

     

  • Profile Image
    Kevin_G
    Answered on March 03, 2016 at 02:54 PM

    Add this CSS code: 

    label#label_input_27_1 {

            width: 200px;

        }

     

    This is the result: