Hey guys im really struggling with getting this right, my boss wants this exact layout and it renders fine in chrome but gets messed up in erpnext.
find attached chrome image and print format image
Chrome:
Print Format:
Print format full screen:
Print format pdf:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quotation_-_PI0004009 (1).pdf</title>
<style>
<style type="text/css">body {
display: contents;
height: 100vh;
max-width: 793px;
/* Set body height to 100% of viewport height */
}
div.pdf {
margin: 0px auto;
}
div.pdf,
div[data-name] {
position: inherit;
}
.textLayer {
position: static;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
opacity: 1;
line-height: 1.0;
}
.textLayer>div {
color: black;
position: fixed;
white-space: pre;
cursor: text;
transform-origin: 0% 0%;
}
<! .textLayer .highlight {
margin: 0px;
padding: 1px;
background-color: rgb(180, 0, 170);
border-radius: 4px;
}
.textLayer .highlight.begin {
border-radius: 4px 0px 0px 4px;
}
.textLayer .highlight.end {
border-radius: 0px 4px 4px 0px;
}
.textLayer .highlight.middle {
border-radius: 0px;
}
.textLayer .highlight.selected {
background-color: rgb(0, 100, 0);
}
.textLayer ::selection {
background: rgb(0, 0, 255);
}
.textLayer ::-moz-selection {
background: rgb(0, 0, 255);
}
.textLayer .endOfContent {
display: block;
position: fixed;
left: 0px;
top: 100%;
right: 0px;
bottom: 0px;
z-index: -1;
cursor: default;
user-select: none;
}
.textLayer .endOfContent.active {
top: 0px;
}
</style>
</head>
<body>
<div class="pdf">
<div class="textLayer">
<!-- TITLE -->
<div style="left: 35.2743px;top: 39.6878px;font-size: 23.625px;font-family: sans-serif;transform: scaleX(1.00564);color: black;">PROFORMA INVOICE</div>
<!-- -->
<!-- Other content -->
<div style="left: 36.9751px;top: 79.92px;font-size: 12.375px;font-family: sans-serif;/* transform: scaleX(1.0004); */">NUMBER:</div>
<div style="left: 130px;top: 79.92px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.00041);"></div>
<div style="left: 36.9751px; top: 98.2035px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);">REFERENCE:</div>
<div style="left: 130px;top: 98.2035px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.01744);"></div>
<!-- ... -->
<div style="left: 36.9751px; top: 115.211px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.02627);">DATE:</div>
<div style="left: 130px;top: 115.211px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.00041);">{{doc.transaction_date}}</div>
<div style="left: 36.9751px; top: 133.495px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.01452);">DUE DATE:</div>
<div style="left: 130px;top: 133.495px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.01546);">{{doc.valid_till}}</div>
<div style="left: 36.9751px; top: 152.203px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);">SALES REP:</div>
<div style="left: 130px;top: 152.203px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.01344);"></div>
<div style="left: 130px;top: 169.211px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(0.999999);">{{doc.page}}</div>
<div style="left: 36.9751px;top: 169.636px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.0253);">PAGE:</div>
<!--NEW PARAGRAPH-->
<div style="left: 36.9751px; top: 258.095px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.0004);">FROM</div>
<div style="left: 462.818px; top: 258.095px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.01359);">TO</div>
<div style="left: 36.9751px; top: 274.352px; font-size: 16.5px; font-family: sans-serif; transform: scaleX(1.01315);"></div>
<div style="left: 36.9751px; top: 293.325px; font-size: 16.5px; font-family: sans-serif; transform: scaleX(1.03013);">LTD</div>
<div style="left: 462.818px; top: 274.352px; font-size: 16.5px; font-family: sans-serif; transform: scaleX(1.01232);">{{doc.customer_name}}</div>
<div style="left: 36.9751px; top: 314.548px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00824);">REGISTRATION NO:</div>
<div style="left: 234.692px; top: 314.548px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 462.818px; top: 314.548px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00635);">CUST REGISTRATION NO:</div>
<div style="left: 665.257px; top: 314.548px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 665.257px; top: 333.086px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 36.9751px; top: 333.511px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.03896);">VAT NO:</div>
<div style="left: 234.692px; top: 333.511px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 462.818px; top: 333.511px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.02208);">CUST VAT NO:</div>
<div style="left: 36.9751px; top: 354.021px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.03221);">POSTAL ADDRESS:</div>
<div style="left: 234.692px; top: 354.021px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.02172);">PHYSICAL ADDRESS:</div>
<div style="left: 462.818px; top: 354.021px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.03221);">POSTAL ADDRESS:</div>
<div style="left: 665.257px; top: 354.021px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.01816);">DELIVERY ADDRESS:</div>
<div style="left: 234.692px; top: 373.198px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 462.818px; top: 373.198px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 665.257px; top: 373.198px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 234.692px; top: 391.906px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 462.818px; top: 391.906px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);">
<!--customerpostalsuburb-->
</div>
<div style="left: 665.257px; top: 391.906px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);">
<!--customerphysicalsuburb-->
</div>
<div style="left: 234.692px; top: 410.19px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 462.818px; top: 411.04px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);">
<!--customerpostpostalcode-->
</div>
<div style="left: 36.9751px; top: 426.772px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.07166);">Tel:</div>
<div style="left: 64.9584px; top: 426.772px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.01269);"></div>
<div style="left: 462.818px; top: 428.048px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.07166);">Tel:</div>
<div style="left: 496.765px;top: 428.048px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.01269);"></div>
<div style="left: 36.9751px; top: 479.272px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.10021);">Description</div>
<div style="left: 301.857px; top: 479.272px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.08947);">Quantity</div>
<div style="left: 371.078px; top: 479.272px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.07156);">Excl. Price</div>
<div style="left: 475.165px; top: 479.272px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.05441);">Disc %</div>
<div style="left: 540.335px; top: 479.272px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.06914);">VAT %</div>
<div style="left: 653.696px; top: 479.272px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.09795);">Excl. Total</div>
<div style="left: 793.898px; top: 479.272px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.10529);">Incl. Total</div>
<div style="left: 36.5504px; top: 520.076px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(0.999406);">{{Item_table}}</div>
<div style="left: 36.5504px; top: 534.306px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 36.5504px; top: 548.536px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 319.803px; top: 520.076px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 375.301px; top: 520.076px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 479.383px; top: 520.076px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 536.28px; top: 520.076px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);">15.00%</div>
<div style="left: 633.972px; top: 520.076px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 770.035px; top: 520.076px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 36.5504px; top: 583.069px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 36.5504px; top: 597.299px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(0.997335);"></div>
<div style="left: 333.568px; top: 583.069px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 368.419px; top: 583.069px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 479.383px; top: 583.069px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 536.28px; top: 583.069px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);">15.00%</div>
<div style="left: 644.292px; top: 583.069px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 780.355px; top: 583.069px; font-size: 12.375px; font-family: sans-serif; transform: scaleX(1.00041);"></div>
<div style="left: 35px;top: 650px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.00041);">Export Code: </div>
<div style="left: 35px;top: 665px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.00041);">Thank you for your business!</div>
<div style="left: 35px;top: 705px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.00041);"></div>
<div style="left: 35px;top: 720px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.00041);">Branch: </div>
<div style="left: 35px;top: 735px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.00041);">Acc No.:</div>
<div style="left: 35px;top: 750px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(0.998711);">SWIFT Code:</div>
<div style="left: 35px;top: 765px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(0.99903);">, will</div>
<div style="left: 35px;top: 780px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(0.995562);">be for your Final Account.</div>
<div style="left: 629.089px;top: 650px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.11004);">Total Discount:</div>
<div style="left: 820px;top: 650px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.00041);">R0.00</div>
<div style="left: 629.089px;top: 670px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.10524);">Total Exclusive:</div>
<div style="left: 820px;top: 670px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.00041);">R0.00</div>
<div style="left: 629.089px;top: 690px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.14885);">Total VAT:</div>
<div style="left: 820px;top: 690px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.00041);">R0.00</div>
<div style="left: 629.089px;top: 710px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.09959);">Sub Total:</div>
<div style="left: 820px;top: 710px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.01185);">R0.00</div>
<div style="left: 35px;top: 805px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.0934);">Total Project Value:</div>
<div style="left: 225px;top: 805px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.00041);"></div>
<div style="left: 629.089px;top: 805px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.09169);">Grand Total:</div>
<div style="left: 820px;top: 805px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.01185);">R0.00</div>
<div style="left: 35px;top: 825px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.06236);">Total Payments Made to Date:</div>
<div style="left: 225px;top: 825px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.00041);">R 0.00</div>
<div style="left: 755px;top: 835px;font-size: 12.375px;font-family: sans-serif;transform: scaleX(1.03162);">BALANCE DUE</div>
<div style="left: 733.979px;top: 850px;font-size: 18px;font-family: sans-serif;transform: scaleX(1.01144);"></div>
<div class="endOfContent"></div>
</div>
</div>
</body></html>
Any help would be flipping amazing
Thanks