Currently, I am tackling an issue in AngularJS while working on the Print Invoice Page. The problem I am encountering is a blank space at the top of the printed screen.
Check out the image here
Below is my code:
HTML
<div id="invoice" class="compact">
<div class="invoice-container">
<div class="card md-whiteframe-8dp printclass">
<div class="header">
<div class="invoice-date">10 October 2017</div>
<div layout="row" layout-align="space-between stretch">
<div class="client">
<div class="invoice-number mb-8" layout="row" layout-align="start center">
<span class="title">PERFORMA INVOICE</span>
<span class="number">PI50/2017</span>
</div>
<div class="invoice-number mb-8" layout="row" layout-align="start center">
<span class="hsn">HSN CODE:-</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="mybutton">
<button class="print" ng-click="vm.takePrint()">Take Print</button>
</div>
CSS
@media print {
body * { visibility: hidden; }
.printclass * { visibility: visible; }
JS
vm.takePrint = takePrint;
function takePrint(){
window.print();
}
I am seeking advice on how to eliminate the blank spaces at the top of the print page. You can refer to the image here.