inconsistent lengths of line in address compared to other fields

  • Profile Image
    Masalamedia
    Asked on July 31, 2015 at 03:46 PM

    CITY and ZIP CODE are different lengths compared to all other fields on my form. Why don't they default to line up? How do I fix this?

     

    Form URL given below; it is embedded on this page

     

    http://8bf.091.myftpupload.com/pledge/

  • Profile Image
    david
    Answered on July 31, 2015 at 06:08 PM

    Hi,

    It seems there is some CSS applied by the theme is is causing the widths.  Try adding this code to your form:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    #input_5_city {
    width : 105% !important;
    }
    #input_5_postal {
    width : 105% !important;
    }

    I had to remove this line:

    #input_5_city {
    width : 100%;
    }

    That made the form look like this:

    http://form.jotformpro.com/form/52117293052953

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Adjust the above values to your liking.

    If you have any further questions, let us know and we will be happy to help.

     

  • Profile Image
    Masalamedia
    Answered on July 31, 2015 at 06:16 PM

    hey, that worked! Thanks.

    OK, so one other thing is the spacing between lines which is weirdly inconsistent. Just as with the widths, it is quite frustrating when the defaults don't provide consistent or aesthetically pleasing results.

    Unfortunately, when I click into the theme Designer to make various adjustments, all the custom CSS I put into PREFERENCES get erased. 

    So, can you point me to the correct CSS tags to make the vertical spacing between my fields more even?

     

    Thanks, MMH

  • Profile Image
    Jan
    Answered on August 01, 2015 at 01:40 AM

    Normally, the .form-line is adjusted by increasing or decreasing it's margin top and bottom. This is for all of the fields. Here's a guide on how to inject this custom CSS code.

    .form-line {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    }

    But, we might need to add something else or target specific fields. Please provide a screenshot or be more specific on what fields that needs to be adjusted. I use Google Chrome Web Inspector to identify the selector that needs to be targeted.

  • Profile Image
    ifeanyiibekwe
    Answered on August 01, 2015 at 06:02 PM

    hello,

    i have really tried using David solution to fixing my form (http://eyesondubai.com/visa-application-form/) width. its not in order. please kindly help. Thanks

  • Profile Image
    Shadae
    Answered on August 01, 2015 at 07:39 PM

    Hi ifeanyiibekwe,

    We do ask that you create a separate thread to have your issue addressed. I am seeing that you created a thread and your issue was addressed.

    If you are still experiencing an issue, please feel free to update your thread: http://www.jotform.com/answers/625765 

    Thank you