payment box cut off

  • Profile Image
    BBC2016
    Asked on January 28, 2017 at 10:58 PM

    Question: on my form found below - I cant get the amount price box is is cut off. it should be proportioned width to everything else aligned RH like the prices above.

     

    ALSO - I want to add the following, But i cant get it to go to the second line it should look like this: 

    Benefactor ($1000 and above)<br><i>You <span class="bold">must</span> enter an amount.</i>

     

    Benefactor ($1000 and above)
    You must enter an amount.

     

     

     

     

    PLEASE HELP AND SEND ME PREVIEW CODE?????? THANK U!

     

     

    http://buildingbridgescoalition.org/registration-form/

     

     

  • Profile Image
    Chriistian
    Answered on January 28, 2017 at 11:57 PM

    Hi,

     

    I am currently checking your form. Please give me sometime to further investigate the issue. I will get back to you as soon as I get the solution for the issue.

     

    Regards.

  • Profile Image
    Chriistian
    Answered on January 29, 2017 at 12:32 AM

    I checked your form (http://www.jotform.us/form/61221289065150) and I was able to see that the amount box is cut-off on the form.

    To fix the issue, please update the CSS code on your form as shown below.

    label[for="input_13_1006"] + br + br + span.form-sub-label-container {

        margin : 0 70px 0 0 !important;

    }

     

    Regarding on the sub-label you want to add to your product "Benefactor ($1000 and above)", unfortunately, adding a html code to the product label will not work. As a workaround, you can add another product item for the "You must enter an Amount" and reposition the label. Just add a free product.

     

    Then add the following custom CSS code to your form:

    input#input_13_1007 {

        display: none;

    }

    span#input_13_1007_price {

        display: none;

    }

    span#product-name-input_13_1007 {

        font-size: 12px;

    }

    #cid_13 span.form-product-item:nth-child(12) {

        position: relative;

        top: -40px;

        left: 20px;

    }

     

     

    Do let us know if you need further assistance.
    Regards.