Side by side column for order options

  • gocarrgo
    Asked on October 30, 2015 at 1:42 PM

    Hello,

     

    I have a long list of order items and I wanted to see if I could have two columns side by side instead of one long column?

    Thx

    Jotform Thread 694158 Screenshot
  • Mike_G JotForm Support
    Replied on October 30, 2015 at 8:27 PM

    In order for you to achieve what you would like to happen to the list of items on you form, you will be needing to add CSS codes using this guide: How-to-Inject-Custom-CSS-Codes

    Here's the code:

    #id_15{

    width: 100% !important;

    }

    .form-product-item:nth-child(even):nth-child(4n){

    float: right;

    clear:both;

    width: 350px !important;

    top:-75px !important;

    height: 64px !important;

    border: 1px solid lightgray;

    }

    .form-product-item:nth-child(even):nth-child(4n+2){

    width: 350px !important;

    display: block !important;

    height: 64px !important;

    border: 1px solid lightgray;

    }

    #id_15 br{

    display: none !important;

    }.form-sub-label-container{

    display:block !important;

    }

    Once you're added those codes to your form, your form should look like this. 

    Side by side column for order options Image 1 Screenshot 20

    Notice that I've added borders for each item to separate them. Also, I have made each item having the same height to make it look equal on your form since there are items that don't have images and/or option for quantity.

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • Mike_G JotForm Support
    Replied on October 30, 2015 at 8:29 PM

    By the way, here's the clone form I've used for testing: https://form.jotform.com/53027009138954

    Feel free to clone it using this guide, How-to-Clone-an-Existing-Form-from-a-URL, to inspect the changes made to the form.

    Thank you.

  • gocarrgo
    Replied on October 30, 2015 at 9:48 PM

    Thank you thank you thank you!  You guys are superstars!

  • Mike_G JotForm Support
    Replied on October 31, 2015 at 6:20 AM

    You're most welcome! Please feel free to contact us anytime should you have any questions or concerns. Thank you.