At my workplace, we have perforated paper that employees fill out and cut to use as information cards. I am working on writing code using ASP.net core to input information onto these cards after a transaction. I have created a preview of the card in an HTML page, but when I try to print the page, the sizes of the divs do not match up with the actual perforated paper, causing alignment issues.
Here is the code for the preview page: Preview.cshtml
@model InputList
@{
Layout = "_PrintLayout";
}
<div class="card" id="printCard">
<div class="card-body pt-2">
<div class="invoice">
<table class="table m-b-30 table-borderless">
<tbody>
@for(int i = 0; i < Model.Count(); i = i + 2)
{
<tr>
<td>
<div class="card InputCard">
<div class="card-header">
test
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">test test test</li>
<li class="list-group-item">test test test test</li>
</ul>
</div>
</td>
<td>
@if (i+1 < Model.Count())
{
<div class="card InputCard">
<div class="card-header">
test 2
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"> test2 test 2 test 2</li>
<li class="list-group-item">test2 test 2 </li>
</ul>
</div>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="text-left d-print-none">
<hr class="m-t-b-20">>
<a href="javascript:window.print()" class="btn btn-outline-success m-r-5">
<i class="fa fa-print m-l-5"></i> print
</a>
</div>
</div>
</div>
Regarding the style: app.css
.InputCard {
height: 15.82920199423rem !important;
width: 21.9456027648rem !important;
margin-bottom: 0.37080004671497rem !important;
max-height: 15.82920199423rem !important;
max-width: 21.9456027648rem !important;
border-radius: 2px !important;
border: 1px solid !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}
Is there a way to print the preview page with accurate div sizes within the td block?