I am a beginner in Angular and I am looking to display modal information. To print the data, I am using onclick=print(). The data shows up in the print preview, but it is not aligned correctly. Here is a screenshot of my page. I want to align the data properly.
Here is my CSS code:
@media print {
#non-printable {
visibility: hidden;
}
#printable{
visibility: visible;
border: none;
position: absolute !important;
left: 0;
top: 0;
overflow-x: auto ;
float: left;
}
}
This is my HTML code:
<div class="modal" id="dModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document" >
<div class="modal-content" style="margin-left: auto; margin-right: auto;">
<div class="modal-body" id="printable">
<div class="container" style="width:100%" >
<div class="row">
<div class="col col-md-3">
<label>Irn Number :</label>
</div>
<div class="col col-md-9">
<label>{{irn}}</label>
</div>
</div>
<div class="row">
<div class="col col-md-3">
<label>Status :</label>
</div>
<div class="col col-md-7">
<label>{{Status}}</label>
</div>
</div>
<div class="row">
<div class="col col-md-3">
<label>QR code :</label>
</div>
<div class="col col-md-7" style="text-align: left;">
<label> <qrcode [qrdata]="qr" [width]="150" [errorCorrectionLevel]="'M'"></qrcode> </label>
</div>
</div>
</div>
<div class="modal-footer" id="non-printable">
<button id="btnPrint" type="button" class="btn btn-secondary" data-dismiss="modal" onclick="print()">Print</button>
</div>
</div>
</div>
</div>
</div>
Thank you for your assistance.