How do I correct the sub-total location on the products?

  • PBB_portland
    Asked on October 1, 2023 at 10:52 PM

    How can I get the subtotal to be in a consistent spot on all items?


    If the title runs to 2 lines, it bumps the subtotal down and it's no longer aligned. Can this be corrected?

    Jotform Thread 5590089 Screenshot
  • Sweta JotForm Support
    Replied on October 2, 2023 at 2:55 AM

    Hi PBB_portland,

    Thank you for reaching out to Jotform Support. The following CSS code can be used to align the sub-total in the products:

    span.form-product-item:nth-child(21) > div:nth-child(1) > div:nth-child(3) > span:nth-child(4) {
     top: 98%;
    }
    span.form-product-item:nth-child(38) > div:nth-child(1) > div:nth-child(3) > span:nth-child(4) {
     top: 98%;
    }

    I'll walk you through the steps to inject the CSS:

    • Open the Form in the Form builder and go to the Form Designer from the top left of the page.
    • Select Styles from the Form Designer tab.
    • Paste the above code in the Inject Custom CSS space and Save the settings.
    • How do I correct the sub total location on the products? Image 1 Screenshot 20

    We have a guide to inject CSS into the form.

    Let us know if you need any more help.



  • Megan
    Replied on October 3, 2023 at 4:17 PM

    Thanks, I added in the code and it did help with all but one item. Any idea why this one ( unscented magnetic clip strip) didn't change?

    How do I correct the sub total location on the products? Image 1 Screenshot 20

  • Sonnyfer JotForm Support
    Replied on October 4, 2023 at 1:51 AM

    Hi Megan,

    Thanks for getting back to us and I'm very sorry to hear that. I'll need a bit of time to look into this. I will be back shortly.

  • Sonnyfer JotForm Support
    Replied on October 4, 2023 at 2:03 AM

    Hi Megan,

    Thanks for patiently waiting. You can add the below code to your existing CSS to align the unscented magnetic clip strip with other products:

    span.form-product-item:nth-child(29) > div:nth-child(1) > div:nth-child(3) > span:nth-child(4) {
    top: 98%;
    }

    It should look like this afterward:

    How do I correct the sub total location on the products? Image 1 Screenshot 20

    Let us know if you need any more help.