How to make Signature fit on the same page on print?

  • Profile Image
    pjl_tn
    Asked on April 04, 2017 at 10:03 PM

    Please see the attached, how the cc/debit card form causes the signature to split into another page.  I tried for some time yesterday to move some fields into another column (like the 3 digit code beside the card number) and make it two columns, via css, got a couple things moved around but wasn't able to get it done completely where it looked okay.  Could you check form and see if it's a real quick thing for you to see what css would be needed to make those fields 2 columns?  I don't want you to need to spend a lot of time though.  In the meantime, I will check that link you provided and see if that would fit with this issue.  If it looks like it would be simple for the President to handle I will try it out . . . it has to be simple for non-tech types in the office to be able to do it in a timely fashion.  A quick look at it, it looks promising!  Thank you for the link :o)

     

  • Profile Image
    EltonCris
    Answered on April 05, 2017 at 04:19 AM

    Inject this CSS codes to your form. This should make them into 2 columns on PRINT mode only.

    @media print{

    li#id_272 { float: left;}

    li#id_181, li#id_241, li#id_272{

        width: 50%;

        display: inline-block;

    }

    .form-address-table {

        max-width: 100% !important;

    }}

    Result:

    Hope this helps!

  • Profile Image
    pjl_tn
    Answered on April 06, 2017 at 01:12 PM

    Thank you very much for your assistance!  That looks great and it works.  However, I did a test using the credit card, clicked the edit link in the notification e-mail, clicked the print button on the form, choosing PDF for save.  It put the form on its own page (2nd page in photo).  On this clone I used for testing I did add a coupon to make it free so I could test the CC part.  Would that have thrown it off with your CSS coding?  If so I'll leave as is and wait for a real one to come through and see how it looks.

    Also, on the 3rd page, is there a way to hide the reCAPTCHA when saving/printing as PDF?  Or, since they have to either put in a phone code, pay now, or write check (which when chosen hides the submit button) would it be safe to remove the reCAPTCHA all together?

    Thank you again, you are greatly appreciated :)

     

  • Profile Image
    Kiran
    Answered on April 06, 2017 at 02:41 PM

    Yes. I have checked your cloned form in the account and tried to print after filling the form which resulted in the same. However, the original form is displaying correctly. Since the newly added coupon field increasing the height of the element, it is being pushed to the second page. If you can change the Paper size to Legal, you can see the element is displayed normally on the first page.

    Hope this information helps! 

  • Profile Image
     
    Answered on April 10, 2017 at 06:39 AM

    Great!  Thank you for verifying my suspicions.  I'll remove the coupon code and it should be great next time we get a submission :)

    Thank you everyone and hope your weeks start and end well :)  Keep up the great work, you are very appreciated!

     

  • Profile Image
    Jim_R
    Answered on April 10, 2017 at 07:27 AM

    Thanks for the warm feedback, we truly appreciate it! All the more reason why we do what we do 😊 Cheers!