How can I make my products align beside each other in Purchase order?

  • Profile Image
    binjehad
    Asked on April 27, 2017 at 08:55 PM

    I made a products purchase form but the list is too long. is there any possible way to make the product boxes align beside each other than under each other? I greatly appreciate it :)

    Thank you & I'll be waiting for your reply.

     

    MJ

  • Profile Image
    Charlie
    Answered on April 28, 2017 at 01:31 AM

    Hi,

    You can try achieving this by using this custom CSS code: 

    /*Start: CSS to make 2 column payment field*/

    .form-product-item {

        border : 1px solid #EFEFEF;

        margin : 1px;

        float : center;

        width : 293px;

        vertical-align : top;

        padding-bottom: 20px !important;

    }

    .form-product-item + br {

        display : none;

    }

    br + b {

        float : right;

        padding-top : 20px;

    }

    .form-payment-total {

        line-height : 50px;

        margin : 1px;

        border : 0px solid #EFEFEF;

        border-radius : 4px;

        padding : 15px;

        padding-right : 193px;

        padding-left : 6px;

        direction: rtl;

    }

    .form-product-item > div {

        float: right !important;

    }

    .form-product-child-table {

        margin-top: 15px !important;

    }

    /*End*/

     

    You can insert it to your form by following this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. You can see how the form looks like on this cloned form that I have: https://form.jotformpro.com/71170579014958

    Let us know if that works. 

  • Profile Image
    binjehad
    Answered on April 28, 2017 at 09:43 AM
    Thank you so much for your help.. It's totally Great ^_^
    ...