umair.ashfr umair.ashfr - 4 months ago 18
Javascript Question

Style Sheet getting added but not the style

I am trying to add some styling to my print page(unfortunately i am a beginner so far so bear with me if i am doing something dumb). Here is the style sheet



@font-face {
font-family: 'Cloister';
src: url('../fonts/fonts/CloisterBlack.ttf');
font-weight: normal;
font-style: normal;
}

.navbar {
display: none;
}
.main-navigation{
display: none;
}
.hidden-print {
display: none;
}
.breadcrumb {
display: none;
}
.page-header {
display: none;
}
.footer {
display: none;
}
.main-container {
/*margin: 0 ;
padding: 0 !important;*/
}
.main-content .container{
min-height: auto;
border: none;
background: #0000ff;
}
@page {
margin: 1cm;
}

h1.page-title {
font-family: 'Cloister';
font-size: 40pt!important;
text-align: center ;

}





and this is my print method.



$('#printButton').click(
function(){
var divContents = $("#printPage").html();
//console.log(divContents);
var printWindow = window.open();
printWindow.document.write(
'<html>' +
'<head>' +
'<link rel="stylesheet" href="<?= base_url() ?>assets/css/print.css" type="text/css" media="print"/>'+
'<title>Student Report Card</title>');
printWindow.document.title = '';
printWindow.document.write ('<h1 class="page-title"> BeaconHouse Potohar Campus</h1>');
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();

});





Everything is seems to be working fine until i inspect my print page, there i can also see my style sheet getting added but when i go to the h1 tag, my style sheet doesn't appear and instead there is user agent stylesheet(added by browser as last resort when no style is present on stackoverflow).

Finally i am adding this image just to consolidate what i am trying to convey.
enter image description here

Answer

Two Three issues jump out:

  1. In your style, you have font-family: 'Cloister'. Those quotes shouldn't be there, it should just be font-family: Cloister.

  2. You're outputting your h1 within your head element. (The browser is then relocating it for you.) It should be after the start of body. I think you just have two of your document.write lines reversed.

  3. As Darren Sweeney pointed out in a comment, you've identified the style sheet as being for print only (media="print"). When using dev tools, if you inspected the print preview, that's fine, but if you cancelled the print and inspected the window you opened, you're not going to see that style because it doesn't apply.

Comments