WKHTMLTOPDF cutting off text from left margin - html

Question

I am currently using WKHTMLTOPDF to generate PDFs through my Laravel application. The PDF template uses Bootstrap 3.3.6.
What I'm currently seeing is that the text, font, layout renders perfectly, but text is cut off from the left-margin.
If I remove the call for the Bootstrap CSS, it doesn't cut off the text, but the tables etc.. aren't aligned/laid out correctly. It must be something in Bootstrap that's causing this issue.
Top of template
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
width: auto !important; min-width: 100% !important;
font-family: 'Lato';
}
.page-break {
page-break-after: always;
}
</style>
The line width: auto !important; min-width: 100% !important; makes more of the text visible, but it's still not perfect (see screenshot below on the second page):
Any text wrapped in<p> </p> fits on the PDF correctly, but the headers and tables etc.. are cut off on the left hand side.
Controller code:
$pdf = PDF::loadView('reports.view-full-audit-report', $data)
->setPaper('a4')
->setOrientation('portrait')
->setOption('encoding', 'utf-8');
return $pdf->download('auditReport.pdf');
Has anyone experienced this before? If so, how did you resolve it? If you require further code samples, please let me know. Many thanks.

Answer 1

I have experienced this before, on Frappé Framweork and ERPNext. The HTML rendering for a DocType (Sales Invoice) will do this for mysterious reasons. So far I have found two workarounds:
1. Set the viewport size in the HTML code as per your final document size. For example, an 8.5 x 11 Letter sized page would be:
<style>
#media screen {
.print-format {
width: 21.59cm;
min-height: 27.94cm;
padding: 0.0cm;
}
}
</style>
I think you can use inches or other accepted measurements as well. You must declare an adequate viewport size on the HTML or Jinja template by doing the above solution
If all else fails, I solved my problem alternatively with the following styles and HTML:
<style>
div.general{
position: relative;
top: 0.0cm;
/*left: 0.0cm; */
}
div.document_size{
position: absolute;
width: 21.59cm;
height: 27.94cm;
}
</style>
<div class="general">
<div class="document_size">
<!-- YOUR HTML GOES HERE -->
</div>
</div>
Finally, to carefully position your elements on the page, use the span tag, with a declared class style, so you can place it in absolute terms within the divs created above. Distances are measured from the top left (origin) of the document:
span.item1{
position: absolute;
top: 1cm;
left: 1cm;
}
Once you have placed the span class= "item1" within the div tags as above, you can place anything you want within them. I consider these span tags as a sort of coordinate system marker, that ensures consistent output on every generation of wkhtmltopdf.