Menu
I have an issue with printing an HTML page styled with Bootstrap 4 (only 4, 3.3.7 works fine) from Chrome where the header and footer are partly covered up. Here is a screenshot of what I'm referring to, you'll see the date, title, file/url are partly cut off. It seems be an issue with bootstrap. I created a small test page with nothing but a link to the bootstrap cdn and it still happens.
Here is the HTML as a test:
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
</body>
</html>
If you put that into an html page and then open it in chrome and right-click -> print, you should see the same results.
Any ideas how to fix?
747
The issue seems to be that the size property is set to a3 in the full bootstrap css file (not the grid or reboot) in version 4.1.1 (most recent version at time of writing)
to fix add following snippet:
@page {
size: auto;
}
Rather than include an additional @page { size: auto; } rule override the $print-page-size: auto; variable before importing the bootstrap scss file:
https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
