Align sub-labels in two-column payment field

  • Profile Image
    CandyGranger
    Asked on July 27, 2018 at 09:50 AM

    I followed the guide from this link to divide products into : https://www.jotform.com/help/178-How-to-Have-Sub-Category-or-Sub-Labels-on-an-Order-Form 

    The problem is when I made the payment field into two columns using CSS codes, the sub-headers also belonged in one column like other products and made the list confusing.

    Is there a way to change the width of the sublabels to double the width of a column? Or maybe apply the code of shrinking the products into two columns EXCEPT for the sublabels - anything that works, please.

  • Profile Image
    ashwin_d
    Answered on July 27, 2018 at 11:27 AM

    Please inject the following custom css code in your form and that should solve your problem:

    #cid_23 > div > div > span:nth-child(31) {

        width: 100%;

    }

    #cid_23 > div > div > span:nth-child(59) {

        width: 100% !important;

    }

    label[for*="23_1015"], label[for*="23_1031"] {

        font-weight: bold;

        text-decoration: underline;

        pointer-events: none;

    }

    span#input_23_1015_price, span#input_23_1031_price {

        display: none !important;

    }

    input#input_23_1031, input#input_23_1015 {

        display: none;

    }


    The following guide should help you how to inject custom css code in form:   https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you need any other changes.