Need help aligning shrank fields when printing

  • safeinsight
    Asked on February 5, 2018 at 4:49 PM
    Any chance I could get you to help center (both vertically and horizontally) the 2 images and one field at the top?  They are ok on the form itself (could stand a bit of a margin left though).  But when I try to print them, this is what I get.  See image below. 
  • Support_Management Jotform Support
    Replied on February 5, 2018 at 5:10 PM

    Here's how I see your form right now when I go to print preview in Chrome:

    Need help aligning shrank fields when printing Image 1 Screenshot 30

    I'm viewing this in Landscape mode by the way which I assume is what you're using too.

    To adjust the left margin of the first image and align all 3 fields vertically, inject the following codes to your form:

    #id_4 {

        margin-left: 60px !important;

    }

    #id_4, #id_5 {

        margin-right: -45px !important;

        text-align: center !important;

        vertical-align: middle !important;

    }

    Then, at the top of the CUSTOM CSS section of your FORM BUILDER, where you have a media query for "print", append the following:

    #id_24 {

        margin-top: -20px;

    }

    The final codes for your print media query would then look like this:

    @media print{

        .print-breaker {

            page-break-after : always;

        }

        #id_24 {

          margin-top: -20px;

        }

    }

    Result:

    Need help aligning shrank fields when printing Image 2 Screenshot 41

    Feel free to further adjust the margin values in px upon your discretion.

  • safeinsight
    Replied on February 5, 2018 at 5:19 PM

    You guys are GREAT!!! Thank you so much!