Jc John Jc John - 7 months ago 17
CSS Question

printing a page in javascript not following the css

I am printing a div in a javascript and i was putting a css within it, why it doesn't follow my css? anything i put in my css was something nothing or it doesn't have an effect to arrange my print section. Can anyone teach me how to arrange the printing page in a javascript code with css to arrange my print?.

how do i apply my css in this situation,

Here is my code:

<div id="printme">
<div class="border">
<div class="row">
<div class="cliniclogo" style="background-image: url()">
</div>
<div class="col-md-12 text-center">
<div class="header-cert">
<p class="certheader"></p>
<p class="certheader" id="clinic_name"></p>
<p class="certheader"><label id="clinic_address"></label>, &nbsp; <label id="city_name"></label> </p>
<p class="certheader"><label id="province_name"></label>, &nbsp; <label id="zipcode"></label> </p>
</div><!-- header-cert -->
</div>
<div class="col-md-12 text-center">
<p class="medcert">MEDICAL CERTIFICATE</p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4 col-md-offset-10">
<p>Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4">
<p class="certmarg">To Whom It May Concern:</p>
</div><!-- col-md-4 -->
</div><!-- row -->
<div class="row">
<div class="col-md-12">
<p class="startindent">THIS IS TO CERTIFY that &nbsp; <label id="cert_name"></label> &nbsp; of &nbsp; <label id="cert_address"></label>
&nbsp; was examined and treated at the &nbsp; <label id="cert_clinic_name"></label> &nbsp; on <label id="cert_check_up_date"></label>
with the following diagnosis: &nbsp; <label id="cert_diagnosis"></label> &nbsp; and would need medical attention for
&nbsp; <label id="cert_physician"></label> &nbsp; days barring complication.</p>
</div>
</div><!-- row -->
<div class="signatory">
<div class="row">
<div class="col-md-4 col-md-offset-10">
<u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
</div>
</div>
</div><!-- signatory -->




here is my javascript printing with css:

function printDiv() {
var divToPrint = document.getElementById('printme');
var htmlToPrint = '' +
'<style >' +
'body {' +
'font-family: arial, sans-serif ;' +
'font-size: 12px ;' +
'}' +

'header-cert{' +
'text-align: center;' +
'text-decoration: underline;' +
'}' +

'</style>';

htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}


why does it not makes my
header-cert
centered in printing? it didn't follow the css that i've put.

Answer Source

I think you missed . in header-cert, so use .header-cert.

function printDiv() {
        var divToPrint = document.getElementById('printme');
        var htmlToPrint = '' +
        '<style rel="text/stylesheet">' +
        'body {' +
            'font-family: arial, sans-serif ;' +
            'font-size: 12px ;' +
            '}' +

        '.header-cert{' +
            
            'text-align: center;' +
            'text-decoration: underline;' +
            '}' +

        '</style>';

        htmlToPrint += divToPrint.outerHTML;
        //newWin = window.open("");
        newWin = window;
        newWin.document.write(htmlToPrint);
        newWin.print();
        newWin.close();
}

document.getElementById('printBtn').addEventListener('click', function(){

  printDiv();
})
<div id="printme">
                  <div class="border">
                    <div class="row">
                        <div class="cliniclogo" style="background-image: url()">
                        </div>
                        <div class="col-md-12 text-center">
                          <div class="header-cert">
                          <p class="certheader">Cerheader title</p>
                          <p class="certheader" id="clinic_name"></p>
                          <p class="certheader"><label id="clinic_address"></label>, &nbsp; <label id="city_name"></label> </p>
                          <p class="certheader"><label id="province_name"></label>, &nbsp; <label id="zipcode"></label> </p>
                          </div><!-- header-cert -->
                        </div>
                        <div class="col-md-12 text-center">
                          <p class="medcert">MEDICAL CERTIFICATE</p>
                        </div>
                    </div><!-- row -->
                    <div class="row">
                      <div class="col-md-4 col-md-offset-10">
                        <p>Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
                      </div>
                    </div><!-- row -->
                    <div class="row">
                      <div class="col-md-4">
                        <p class="certmarg">To Whom It May Concern:</p>
                      </div><!-- col-md-4 -->
                    </div><!-- row -->
                    <div class="row">
                      <div class="col-md-12">
                        <p class="startindent">THIS IS TO CERTIFY that &nbsp; <label id="cert_name"></label> &nbsp; of &nbsp; <label id="cert_address"></label>
                         &nbsp; was examined and treated at the &nbsp; <label id="cert_clinic_name"></label> &nbsp; on <label id="cert_check_up_date"></label>
                        with the following diagnosis: &nbsp; <label id="cert_diagnosis"></label> &nbsp; and would need medical attention for 
                        &nbsp; <label id="cert_physician"></label> &nbsp; days barring complication.</p>
                      </div>
                    </div><!-- row -->
                    <div class="signatory">
                        <div class="row">
                            <div class="col-md-4 col-md-offset-10">
                              <u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
                            </div>
                        </div>
                    </div><!-- signatory -->
                    
                    
                    <button id="printBtn">Print<button>