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

  • Profile Image
    learningmindsets
    Asked on August 12, 2015 at 03: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

  • Profile Image
    Mike
    Answered on August 12, 2015 at 08: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;

    }

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

  • Profile Image
    learningmindsets
    Answered on August 13, 2015 at 05: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

    ...
  • Profile Image
    Sammy
    Answered on August 13, 2015 at 06: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

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

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

     

  • Profile Image
    learningmindsets
    Answered on August 13, 2015 at 07: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

    ...
  • Profile Image
    Sammy
    Answered on August 13, 2015 at 08:56 AM

    Try using the following snippet

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

  • Profile Image
    Hacf
    Answered on August 13, 2015 at 09:06 AM

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

     

  • Profile Image
    Kiran
    Answered 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!!