How to align the products in my form?

  • Profile Image
    bdoodle
    Asked on April 26, 2017 at 12:37 AM

    I have made no changes to my forms and I haven't looked at the forms on the website in some months.  Looking now, I see many of my forms have similar problems.  As an example, please see my Gear Order form (https://form.jotformpro.com/52265902147959

     

    The quantity fields on my products (not having subproducts) are now too close to the product description

    price.  See Boom Whoopie and Battens.  Also, the line spacing between products isn't good. Please give

    me the CSS I need to fix this without disturbing the rest of my fields' alignment.

     

    I'm uploading a screenshot showing the problems.

    Thanks for your help.

  • Profile Image
    candy
    Answered on April 26, 2017 at 04:18 AM

    Hello,

    I have cloned your form on my side in order to test it.

    Firstly, I have injected the following CSS codes in order to fix the first drop-down list as you can see in the following screenshot below:

    #input_349_quantity_1037_0 {

    margin-left: 145px;

     }

    .form-sub-label[for=input_349_quantity_1037_0] {

    margin-left: 145px;

     }

    As the "Flying Scot Heavy Air Battens (Top 2)" named field is too long, it is normal that the text box is out of the alignment. Please make it shorter by deleting the full stops.

    I will investigate about making the vertical alignment between products larger.

    Thank you for your patience.

  • Profile Image
    bdoodle
    Answered on April 26, 2017 at 09:48 AM

    Hello,

      Thanks for showing me how to move the Qty and Sets labels and input fields to the right.  I'll await your help on getting a line space between products.

  • Profile Image
    Helen
    Answered on April 26, 2017 at 11:08 AM

    Hi,

    You can set the line spaces between the products by injecting custom CSS codes. Here:

    .form-product-item div {

        margin-bottom : 40px !important;

    }

    You can change the size of space in the code. I have cloned your form and tested on my side. Your form will be shown like on this below screenshot:

    Here is a guide a helps to you for injecting custom CSS codes: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you have any other questions or issue, please do not hesitate to contact us.

  • Profile Image
    bdoodle
    Answered on April 26, 2017 at 12:21 PM

    Thank you!