How to line up Prices and Names into Columns in the Payment Tool

  • Profile Image
    churchsaver
    Asked on July 17, 2014 at 12:53 PM

    I have asked this before, but so far there has not been anyone who has a way to accomplish this.  Posting again in hopes that there is an answer now. :)

     

    I have a form with a payment tool.  I would like the columns of the payment tool to line up (see screenshot).  Right now, the only way that I have been told to accomplish this is to put a bunch of .......'s after the product name to push the price out enough on each one.  This really messes with my CRM.  I need a way to do this without the ......'s.  

     

    Thanks in advance for your help!

  • Profile Image
    churchsaver
    Answered on July 17, 2014 at 12:55 PM

    PS - I don't need the red lines... they are just visual examples of where I need the columns to be.  

  • Profile Image
    Mike_T
    Answered on July 17, 2014 at 04:44 PM

    I am currently looking into a custom CSS way. I will get back to you via this thread.

  • Profile Image
    Mike_T
    Answered on July 17, 2014 at 09:38 PM

    I am sorry for the delay. You can remove the dots, and add the following CSS to your custom styles:

    .form-product-details {
    float: right;
    margin-right: 300px;
    }
    .form-sub-label-container {
    position: relative;
    top: -20px;
    }
    .form-sub-label-container label {
    display: none;
    }

  • Profile Image
    churchsaver
    Answered on July 18, 2014 at 05:05 PM

    I think that might just work!  Although 1 thing did mess up..... looks like one of my prices .... Accu-Chek Multiclix Lancets is not lining up.  Any ideas on how to fix that?  Thanks!

     

     

  • Profile Image
    churchsaver
    Answered on July 18, 2014 at 05:22 PM

    Looks like it also messed up my text where it asks for name and address.  Hope you can help! :)

  • Profile Image
    Mike_T
    Answered on July 18, 2014 at 06:08 PM

    Although 1 thing did mess up..... looks like one of my prices .... Accu-Chek Multiclix Lancets is not lining up.

    Please remove the following CSS to fix this:

    label[for="input_1_1053"]{width: auto !important;display: inline-block;vertical-align: middle;}

    Looks like it also messed up my text where it asks for name and address. 

    It can be done with the following CSS:

    .form-product-details {
    float: right;
    margin-right: 300px;
    }
    .form-product-item .form-sub-label-container {
    position: relative;
    top: -20px;
    }
    .form-product-item .form-sub-label-container label {
    display: none;
    }

    Added .form-product-item to the current CSS.

    Thank you.

  • Profile Image
    churchsaver
    Answered on July 18, 2014 at 06:43 PM

    The second part (where the address and name messed up) worked fantastically!

     

    The first part, where I was to delete the part of the code didn't work how I needed it to.  I would like for the prices to all line up as they currently are.  There is just one that isn't lining up.... AccuChek Multiclix lancets... the $2 price isn't lining up like the other prices are.  I need it to line up just like the other product prices are.  (Hope I am explaining that well enough).

     

    Thanks so much for all of your help!!!

  • Profile Image
    ashwin_d
    Answered on July 19, 2014 at 05:32 AM

    Hello churchsaver,

    Please take a look at the following cloned form and see if this meets you expectation in terms of the alignment of product prices: http://form.jotformpro.com/form/41992133086962?

    If the cloned form looks good, please replace your existing css code of your form with the following custom css code where I have removed the code which was causing the alignment issue:

    .form-product-item {width: 700px !important;}.form-product-item br {display: none;}.form-product-item .form-sub-label-container {width: 275px !important;float: right;}input[name*="q1_tellUs1[special"] {float: left;}label[for="input_1_1053"]{width: auto !important;vertical-align: middle;}

    .form-product-item .form-checkbox {display: none;} .form-all {

    background: url("http://cashforteststrips.com/wp-content/uploads/2014/06/boxquote4.png") repeat-y; center;

    min-height: 410px !important;

    overflow: visible !important;

    }

    .form-section{margin-left:50px !important;}

    span.form-product-details {font-size: 11px;color: #000000;}

    .form-product-details {

    float: right;

    margin-right: 300px;

    }

    .form-product-item .form-sub-label-container {

    position: relative;

    top: -20px;

    }

    .form-product-item .form-sub-label-container label {

    display: none;

    }

    You can also copy the custom css code from the following URL:  http://pastie.org/pastes/9404777/text

    The following guide should help you in injecting the custom css code in your form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes