In Chrome, why does field focus and error highlighting extend beyond the right edge of my form?

  • Profile Image
    kjfuller
    Asked on December 09, 2014 at 04:48 PM
  • Profile Image
    Kiran
    Answered on December 09, 2014 at 07:16 PM

    Hello Kevin,

    It appears that your JotForm seems to be fine. I've tried submitting your JotForm and doesn't seem to be having any issue. 

    Could you please elaborate if I'm missing something from your query? We will wait for your response.

    Thank you!

  • Profile Image
    Kevin Fuller
    Answered on December 10, 2014 at 04:05 PM

    It appears to work currently because I removed the highlight and required fields features. I will turn them back on so you can see what I'm talking about.

    Kevin J

  • Profile Image
    Ben
    Answered on December 10, 2014 at 05:26 PM

    Hi Kevin,

    I took a look at both of the jotforms, but I presume that this one had the issue: http://www.jotform.us/form/43426788922163

    I say had since I too can not see the overlay to be wider than the jotform. Can you please confirm if you were able to fix the issue through CSS yourself?

    Best Regards,
    Ben

  • Profile Image
    abajan
    Answered on December 10, 2014 at 06:15 PM

    Kevin,

    I saw the problem. Please add the following code to the jotform's injected CSS:

    .form-line, .form-line-error {
    width: 278px;
    }

    .form-line-error {
    text-shadow: 0 0 0 #C85757;
    }

    .form-error-arrow-inner {
    border-bottom-color: #FF3200;
    }

    .form-error-message {
    color: #FFF !important;
    font-weight: bold;
    margin-bottom: 10px;
    }

    #id_2 {
    margin-bottom: 20px;
    }

    Only the first rule is necessary to correct the issue to which you referred but I noticed other issues which would be corrected by the others. (Unless, of course, you specifically wanted the jotform to appear that way.)

    When done, your form should look like this clone. If you would like further help with this, please let us know.


    Thanks