I'm trying to print some "chosen" content on my webpage with printThis jQuery plugin. When I press print_btn
, no images or <hr>
are shown in the print. Why?
HTML
<button id="print_btn"></button>
<div class="elementBricka display" style="page-break-after:always">
<div class="lkbLoggo"></div>
<hr>
....
CSS
#elementBrickor{
align-items: center;
}
.elementBricka{
width: 9.614cm;
height: 14.404cm;
border: 1px solid;
background-color: white;
float: none;
margin-left: auto;
margin-right: auto;
}
.lkbLoggo{
width: 9.182cm;
height: 2.721cm;
margin-top: 0.199cm;
background-image: url("/img/lkb_logga2.png");
background-repeat: no-repeat;
background-position: center;
}
JS
$(document).ready(function () {
$('#print_btn').click(function () {
$('.display').printThis({
debug: true,
importCSS: true,
importStyle: true,
loadCSS: "/Data.css",
pageTitle: false,
});
});
});
UPDATE
I´ll answear my own question.
This has nothing to do with "PrintThis".
It´s a browser "issue".
But it was easy fixed with adding: !important
in my Css file where i load the img.
Ok, so there is no way to make "PrintThis" print my images.
But i found a way in CSS:
.lkbLoggo{
width: 9.182cm !important;
height: 2.721cm !important;
margin-top: 0.199cm !important;
background-image: url("/img/lkb_logga2.png") !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
Just add !important
after each line and it shows in the print.
Now.. i´d like a funktion to make a whole class important, instead of adding it to every row.