Need help with aligning div content for print media query.
Created a media query to target both screen and print.
Print media query is similar to the screen media query.
Display is fine on the screen, but misalignment occurs when trying to print.
Fiddle: https://jsfiddle.net/20dhfoub/7/
Looking for guidance on where I'm going wrong.
//markup
<div id="folha">
<div class="container-print center">
<div class="color-black">
MY TEST
</div>
<div class="paciente color-black">
<div><strong class="ng-binding">THATIANA NUNES ALMEIDA</strong></div>
<div class="medplano">
<div class="ng-binding">Sem Pref</div>
<div class="ng-binding">IRB-APOSENTADOS/EX COLABORADORES</div>
</div>
<div class="medplano">
<div class="ng-binding">15/01/182018 20:46:13</div>
<div>TOTEM</div>
<div class="ng-binding">Matr:00000</div>
</div>
</div>
<div class="color-black">
<span style="border-radius:50%; border:solid black 1px;padding:5px">TRAN</span>
<span style="border-radius:50%; border:solid black 1px;padding:5px">REC</span>
</div>
</div>
<div class="container-obs color-black">
<div class="ng-binding"></div>
<div class="ng-binding">Rx e Procedimentos no receituário com CID. Fratura podemos cobrar Consulta.Recepção: Fratura podemos cobrar Consulta.Densitometria óssea com autorização via fax 2240.1621.Procedimentos acima 300 chs, necessita de autorização. Paciente deverá apresentar lâmina de pagamento. Observar sempre validade da carteira.
</div>
</div>
</div>
//css
@media screen {
#printSection{
display: none;
}
.circle{
border-radius:50%;
border:solid black 1px;
padding:5px
}
.container-obs{
display: flex;
flex-direction: column;
}
.container-print {
display: flex;
padding-top:10px;
}
.container-print div:last-child {
margin-left: auto;
}
.center {
align-items: center;
}
.medplano{
display: flex;
}
.medplano>div{
margin-right: 30px;
}
.paciente {
margin-left: 15px;
}
}
@media print {
body * {
display:none;
}
#folha{
display:none;
}
.circle{
border-radius:50%;
border:solid black 1px;
padding:5px
}
#printSection, #printSection * {
display: block!important;
-webkit-print-color-adjust: exact;
printer-colors: exact;
color-adjust: exact;
}
@page { size: auto; margin: 0mm; }
.container-obs{
display: flex;
flex-direction: column;
}
.container-print {
display: flex;
padding-top:10px;
}
.container-print div:last-child {
margin-left: auto;
}
.center {
align-items: center;
}
.medplano{
display: flex;
}
.medplano>div{
margin-right: 30px;
}
.paciente {
margin-left: 15px;
}
}
//js
$(function() {
var PrintDoc=function(id) {
var printSection = document.getElementById('printSection');
// if there is no printing section, create one
if (!printSection) {
printSection = document.createElement('div');
printSection.id = 'printSection';
document.body.appendChild(printSection);
}
var elemToPrint = document.getElementById(id);
if (elemToPrint) {
printElement(elemToPrint);
}
function printElement(elem) {
// clones the element you want to print
var domClone = elem.cloneNode(true);
printSection.innerHTML = '';
printSection.appendChild(domClone);
console.log(printSection.innerHTML)
window.print();
}
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (!mql.matches) {
afterPrint();
} else {
// before print (currently does nothing)
}
});
}
window.onafterprint = afterPrint;
function afterPrint() {
// clean the print section before adding new content
printSection.innerHTML = '';
}
};
PrintDoc('folha');
});