Text block overlaps area of the background image.

  • charitychallenge
    Asked on March 25, 2015 at 8:14 PM

    Please view this form in Google Chrome and you should see the problem in a a few of the text blocks (I also just noticed the same issue on IE).

    I don't see the problem when viewing on Firefox (latest version).

    http://www.jotform.com//?formID=50710813087956#

    I've checked CSS and it is empty.

    This problem was noticed by our customer and I have replicated on my computer.

    Latest version of Chrome Version 41.0.2272.101 m (and IE
    11.0.96...)

    Running on Windows 7 Prof.

    Your urgent response would be greatly appreciated.

    Thanks

    Jotform Thread 540794 Screenshot
  • Charlie
    Replied on March 25, 2015 at 10:23 PM

    Hi,

    You can try declaring a specific width to match the background image.

    Here's the custom CSS code that you can use:

    .form-html {

        max-width : 700px !important;

    }

    .form-line {

        width: 600px !important;

    }

    You can add it inside your Form Designer->CSS Tab.

    Text block overlaps area of the background image Screenshot 20

     

    Here's how it should looked like, please see if this works for you: http://form.jotformpro.com/form/50838516551963?.

    Do let us know if you need more information on this.

    Kind regards.

  • charitychallenge
    Replied on March 25, 2015 at 10:43 PM

    Thank you - I will test, but wondering why I have never noticed this before with other forms and do I now need to add this CSS code to every form I create?

  • Ashwin JotForm Support
    Replied on March 26, 2015 at 12:31 AM

    Hello charitychallenge,

    On behalf of my colleague, you are welcome.

    No you do not have to inject the above custom css code in every forms you create. This issue must be specific with this form caused by some other custom css code.

    Do get back to us if the issue persists.

    Thank you!

     

  • charitychallenge
    Replied on March 26, 2015 at 12:35 AM

    Hmmm

    As I said in my initial query, I checked the CSS and there was no code.

    The only thing I did via the Designer was to add a light blue background, but this did not add any CSS code.

    A bit of a mystery...

     

  • Elton Support Team Lead
    Replied on March 26, 2015 at 1:47 AM

    @charitychallenge

    Apologies for the inconvenience and for the confusion. 

    It is most probably due to the current theme you are using which is the "Pastel Theme". We highly recommend using the default "Nova Theme" when you load your form into the form designer to prevent issues like this. However, of course you can correct it by injecting custom CSS codes if you want to stay with the Pastel Theme.

    Text block overlaps area of the background image Screenshot 20

    Hope this clears your question. Thank you!