Printing HTML Form using window.print()

Question

I was charged with the task of building a HTML Form link to a DB. Here no problem.

The problem is I need the user to be able to print that form. So I build a "Print button" using a HTML button and I put some JQuery behind it so the form would format correctly (remove some borders, background-images and such) and I use window.print() to print my form.

Here is the problem:

My form is 6 to 7 pages long.

But has expected It print fine on Google Chrome (All the section are on separate pages) but In IE (latest version) some field and some sections are "cut in half" on some pages.

I think the problem is how IE use margins and paddings.

I also checked for any parameter I could pass to window.print() on Google thinking maybe it could help but did'nt find anything.

Can someone provide another way or another function I could use so my form look the same on both browser when print?? Or maybe someone could point If I made a mistake.

Here is my code:

HTML:

<div id="divCodeSecurite">
    <h3 class="Titre">Codes de sécurité des ascenseurs</h3>
        <span class="SHL MixteLeft" id="CodeSecuriteLeft">
            <input type="radio" id="B442007" name="CodeSecurite" value="B44-2007"/>
            <label for="B442007">B44-2007</label>
            <input type="radio" id="B442010" name="CodeSecurite" value="B44-2010"/>
            <label for="B442010">B44-2010</label>
            <input type="radio" id="ASME1712007" name="CodeSecurite" value="ASME 17.1-2007"/>
            <label for="ASME1712007">ASME 17.1-2007</label>
            <input type="radio" id="ASME1712010" name="CodeSecurite" value="ASME 17.1-2010"/>
            <label for="ASME1712010">ASME 17.1-2010</label>
        </span>
        <span class="SHR MixteRight" id="CodeSecuriteRight">
            <label for="CodeSecuriteAutre" class="SHLabel">Autre:</label>
            <input type="text" id="CodeSecuriteAutre" name="CodeSecuriteAutre"/>
        </span>
        </br></br>
        <span class="SHL">
            <label for="VilleInstallation">Ville d'installation:</label>
            <input type="text" id="VilleInstallation" name="VilleInstallation"/>
        </span>
</div>
</br>
<div id="divTypeControl">
    <h3 class="Titre">Type de contôle</h3>
        <span class="SHL">
                <label class="SHLabel">Modèle:</label>
            <input type="radio" id="JHD1000" name="JHD1000" value="JHD-1000"/>
            <label for="JHD1000">JHD-1000 (Avec automate)</label>
        </span>
        <span class="SHR">
            <input type="radio" id="JHD2000" name="JHD2000" value="JHD-2000"/>
            <label for="JHD2000">JHD-2000 (Carte de communication Canbus)</label>
        </span>
</div>
<div class="Spacers divspacer" style="height:440px;"></div>

Notes: I put only a sample of my code. I have several time this lenght. The <div class="Spacers divspacer" style="height:440px;"></div> is what I used to try and put all the <div id=""> on one page each.

CSS:

<style rel="stylesheet" type="text/css">
        .Border
        {
            border: black solid 2px;
        }
        .Titre
        {
            text-align:center;
            background-color:black;
            color:white;
            border: solid black 2px;
        }
        .Spacers
        {
            display:none;
        }
    </style>

Notes: I remove the code that was not directly needed for the question if I remove something that was needed please say so I will Edit and Add the missing code.

FYI: dont look for .divspacer. It does not exist, it is use only in my JQuery (see below).

JQUERY:

function ImprimerForm()
        {
            $("#divBgd").removeClass('Border');//This remove the border
            $("#divValidationEnvois").css('display', 'none');//This hide all the button so they dont print
            $(".divspacer").removeClass('Spacers');//Make spacers visible

            window.print();//Print form

            $("#divBgd").addClass('Border');//Put everything back has it was!!
            $("#divValidationEnvois").css('display', 'block');
            $(".divspacer").addClass('Spacers');
        }

So Just to be clear:

Probelm: I can't get IE and Chrome to print my form the same way. Some field are cut in two and some <div> are on two different pages.

Looking for: A way to make them print my form the same way on both browser OR an error a made with the layout.

What I already did: Look for parameters for window.print() AND Tried adding some SPACERS (see code above).

Thank you all for the help!

Answer 1

Instead of trying to hide unwanted divs using jQuery, you should use a print specific css instead. By hiding elements with jQuery you could bump into unwanted side effects. By adding a print css, you specify a ruleset only used when the printer is trying to print the page. So nothing is added to your visible css rules. In this CSS you can for example set certain elements to display:none;.

Example of adding an IE specific print css:

<!--[if IE]>
  <link rel="stylesheet" type="text/css" media="print" href="printer.css" />
<![endif]-->

You can remove the if IE / endif tags if you want to apply to rules to all browsers.

Another option to create print rules is to use a css @media print section like so (using it this way also applies it to all browsers, which is actually not a bad idea):

<style rel="stylesheet" type="text/css">
  @media print {
    #divValidationEnvois {
      display: none;
    }
  }
</style>