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

The highlight when completing the form hangs over the right side.

Please advise.

Kevin Fuller

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!

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

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

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