Remove Strange line after the text box field

Can you please tell me how to get rid of the gray line after the first text box on the form? Thank you.

Hi zwertsky,

I can see the line that you are talking about. It has something to do with the background image. Please try editing this CSS code by replacing the URL of the image.

ul.form-section li.form-line:first-child {background: url('https://shots.jotform.com/elton/images/bg_envelope_02.gif') no-repeat 0 2px;}

Use this one:

ul.form-section li.form-line:first-child {background: url('http://oi60.tinypic.com/vhw9w0.jpg') no-repeat 0 2px;}

Please refer to this guide on How to Inject Custom CSS Codes on your form (https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes)

I hope this helps.

Didn't help. Any other suggestions? Thank you.

Hi ztwersky,

Thank you for updating me. Please erase the custom CSS that I told you to put a while ago.

I tried recreating the form using the same theme and I found out that the issue is not happening if there is a header or a title. 

As a workaround, go to Setup & Embed, then to Preferences, then to Form Styles tab and check this css code. You need to replace the background image url.

Replace the current URL with this (http://oi60.tinypic.com/vhw9w0.jpg)

This should be the result.

Please let me know if this will resolved your issue.

Please look at your first answer. That's exactly the same code you told me to do and I did and it didn't work.

I don't mind using a header or title but the problem with these is that they won't center.

Oh sorry to hear that. I'm not from the support team so I cannot access your form directly. I'm just debugging your form through Chrome browser. Check these screenshots.

Yes, what it was is that has the css code twice. Once alredy inserted by the template with the correct URL (http://i59.tinypic.com/2aakgm1.png) and again with the problematic one. I deleted the problematic one and now it is fine. Thank you!!

Great! Which is why I asked you to delete the custom CSS code I gave. This should be URL (http://oi60.tinypic.com/vhw9w0.jpg) I updated it a while because it is different compared to the original one. The theme creator might need to update that background image.

I am glad that your issue got resolved. Have a great day.

Hi,

I took a look at the form and I am glad that you were able to resolve the issue. However the template should have worked originally, so there is some underlying problem that might come out at another point in time. Please let us know if this happens and we will take a look.In the mean time I will clone your form and take a look what might be the cause of that and get back to you on this.Best Regards,
Ben

Hi ben,

That is true. It is just a workaround for the meantime. I would like to report this issue to the support team. Normally, the issue is not happening if there is a header title on the form. I tried increasing or expand the height of the image. But again, it is just a workaround. The support team will still have the final say.

Thank you

Thanks guys.

Yes centering the header text itself is actually apart of another impending issue so I have gone ahead and moved this to a separate thread for you. We will follow-up with it there as soon as we can.

Hi,

I have just found that the form 'looses' this line if the text is not of the 'proper' size. What happens is that the form style is defined for text of that size and type and if you change anything besides the text itself it will show a bit differently.

Now if this happens, there are other parts of the CSS that would need to be adjusted to properly fix the layout, using another image and removal of the header has hidden this.

By header I am applying to the Text widget with some HTML and style properties that is created as a header once your start using the theme.

I hope this helps everyone looking for a similar answer in regards to this or some other JotForm theme. :)

Best Regards,
Ben