How can I get the Credit Card Number field and the Security Code number field on one line?

  • learningmindsets
    Asked on August 12, 2015 at 3:17 PM

    Also, how can I get the credit card expiration date and the expiration year on one line--there is more than enough room.  These fields were automatically generated when I completed the payment integration wizard.  Thanks, Tim

    Jotform Thread 636699 Screenshot
  • Mike
    Replied on August 12, 2015 at 8:15 PM

    Please try injecting the next CSS in order to adjust the layout.

    [data-type="control_authnet"] .form-address-table  tbody tr:nth-child(3) .form-sub-label-container:nth-child(1) {

        width : 48%;

        margin-right : 0px;

    }

    [data-type="control_authnet"] .form-address-table  tbody tr:nth-child(3) .form-sub-label-container:nth-child(2) {

        width : 30%;

        margin-left : 12px;

    }

    [data-type="control_authnet"] .form-address-table  tbody tr:nth-child(4) .form-sub-label-container:nth-child(1) {

        width : 48%;

        margin-right : 0px;

    }

    [data-type="control_authnet"] .form-address-table  tbody tr:nth-child(4) .form-sub-label-container:nth-child(2) {

        width : 48%;

        margin-left : 12px;

    }

    How can I get the Credit Card Number field and the Security Code number field on one line? Image 1 Screenshot 20

    If you need any further assistance, please let us know.

  • learningmindsets
    Replied on August 13, 2015 at 5:15 AM
    Thanks—that worked with a little tweaking.

    However—my form design page is no longer changing the format of my fields (from rounded corners to square corners). Is just stuck at rounded corners. Is that being caused by my injecting this code?

    Also—can you offer how I could decrease the vertical distance between my check box lines. They are current separated by about half an inch (see attached screen shot) and it would be a better use of form space to have about half that.

    Thanks Mike-
    Tim

    ...
  • Sammy
    Replied on August 13, 2015 at 6:33 AM

    You can change the rounding from the designer, select a textbox then ind the designer tab under textbox styles select the rounding type

    How can I get the Credit Card Number field and the Security Code number field on one line? Image 1 Screenshot 20

    To decrease the spacing between check-boxes add the following CSS code

    .form-product-item {
        margin-top : 0px;
        padding : 0px;
    }

     

  • learningmindsets
    Replied on August 13, 2015 at 7:45 AM
    Thanks worked perfect thank you…

    Finally: Is there a way to make the height of a submit button narrower and still keeping the text vertically in the middle of the button. I find when I get the button with to where I want it, the distance between the text and the top border doesn’t change and the text ends up being vertically uncentered.

    Thanks again~!
    Tim

    ...
  • Sammy
    Replied on August 13, 2015 at 8:56 AM

    Try using the following snippet

    .form-submit-button {
        padding:0px;
        height:30px;
        /* optional attributes below*/
        font-size:15px;
        width:30%;
    }

  • Hacf
    Replied on August 13, 2015 at 9:06 AM

    I don't use CSS so could you provide the above instruction using the formatting buttons please?

     

  • Kiran Support Team Lead
    Replied on August 13, 2015 at 10:53 AM

    @Hacf,

    Your question is moved to a separate thread and shall be addressed there shortly.

    http://www.jotform.com/answers/637568

    Thank you!!