Multi-page Print Form CSS/HTML Not Working.

  • Profile Image
    websiteteam
    Asked on January 15, 2017 at 05:07 PM

    I have a multi-page form that I have added the following CSS:

    @media print{

     

        .pageBreak {

     

            page-break-after : always !important;

     

        }

     

    }

    And inserted the following HTML: <div class="pageBreak"> </div> where I want a printed page break. I have cleared the Form cache and the browser cache, Google Chrome.

    The desired result of printing a new page after this code is entered is not working. There are approx. 25 - 26 pages that I need the user of the form to be able to print, with page breaks where I set them in the back-end of the form, using Google Chrome browser only.

    JotForm: https://form.jotform.com/63275744442156?session=

  • Profile Image
    Chriistian
    Answered on January 15, 2017 at 10:57 PM

    I checked the print feature on your form and it seems to be working properly. No fields were overlapping on the print preview.

    Does the issue still persist on your end? Can you please try replacing the current CSS with the one below instead:

    @media print{

        .pageBreak {

            page-break-before : always;

            page-break-inside : avoid;

        }

    }

    Regards.

  • Profile Image
    websiteteam
    Answered on January 16, 2017 at 04:45 PM
    Thank you
    - I have one additional follow-up question, please -
    Please see the attached screenshot and the notation. I need to know if the notated items may be excluded from the Print function so that they do not print out with the rest of the form?
    ...
  • Profile Image
    Chriistian
    Answered on January 16, 2017 at 08:23 PM

    Unfortunately attached images are not visible in the forum. To send an image to the thread, please visit your thread here https://www.jotform.com/answers/1035085 and follow this guide on How to add screenshots/images to questions to the support forum?

    You can also list here the names of the fields that you want to exclude from the print and we will see if it is possible to hide them when printing.

    I will wait for your response.
    Regards.

  • Profile Image
    websiteteam
    Answered on January 16, 2017 at 08:45 PM
    The very Last Three fields of the Form:
    "IMPORTANT" Print form BEFORE submitting. Submitting clears the Form of ALL entries!"
    "CLICK Submit Form after you have Printer It!"
    "Submit Form" Button
    This prints out an extra page and it is not needed or required.
    I still need these to appear on the Form itself - Just not the printed version.
    ...
  • Profile Image
    Chriistian
    Answered on January 16, 2017 at 10:48 PM

    Please insert the yellow highlighted code below inside the @media print { ... } section of your form css code to hide the three specified fields from printing. 

    @media print{

       .pageBreak {

            page-break-before : always;

            page-break-inside : avoid;

        }

       #id_342, #id_344, #id_340 {

           display: none!important;

       }

    }

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