I have been working on creating a print command to print a specific div, and I have managed to successfully run the print command using default methods like CTRL + P and also with a button click.
The Issue:
However, I have encountered a problem where the layout I am trying to print, based on Bootstrap, appears differently on Chrome compared to Firefox.
While Firefox displays the layout correctly in print command and PDF, Chrome is causing the grid system to break and display columns in a new row (refer to the screenshot below).
I am struggling to identify the root cause of this issue and why the grid system is not rendering properly in the print command using Chrome.
Below is the code snippet of the page I am trying to print:
HTML with the specific div I am trying to print (ID: "print_layout")
<div id="print_layout">
<!-- Code for the specific layout goes here -->
</div>
This is the button I am using to trigger the print command:
<button onClick="printdiv('print_layout');" class="btn btn-primary">PRINT</button>
Javascript function to print specific div only:
<script>
function printdiv(elem) {
var header_str = '<html><head><title>' + document.title + '</title></head><body>';
var footer_str = '</body></html>';
var new_str = document.getElementById(elem).innerHTML;
var old_str = document.body.innerHTML;
document.body.innerHTML = header_str + new_str + footer_str;
window.print();
document.body.innerHTML = old_str;
return false;
}
</script>
Attempts made so far to resolve the issue:
- Added Bootstrap classes in the header of the print code, but it did not work.
- Tried adding inline CSS to fix the grid system, but that also didn't work.
Any insights on what might be causing the differences in layout between Chrome and Firefox during printing?
Thank you!
Attached screenshots show the original layout generated using HTML, Bootstrap, and PHP, and the printing view of the same layout, highlighting the issue with column alignment:
https://i.sstatic.net/6nEgW.png
https://i.sstatic.net/BZ5MZ.png
Update on investigation:
Upon switching from portrait to landscape mode in the print view, the layout appears correctly. This suggests that the issue is related to how the Bootstrap grid is functioning in the print layout.