ScrollY causes headers to be misaligned during window.print()
ScrollY causes headers to be misaligned during window.print()
JaGo
Posts: 5Questions: 1Answers: 0
Hello! Thanks for the awesome plug-in, it has been very useful for me!
Current problem though...I am using an application where I have a button that prints the entire page with window.print(). (It's the equivalent to printing from your browser).
Here is the javascript function:
function printdiv(printpage) {
$('.panel-collapse').collapse('show');
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + newstr + footstr;
window.print();
document.body.innerHTML = oldstr;
}
Problem is, when a table has "scrollY" enabled, the columns of the headers will overflow and be misaligned. Here is an example of what I mean:
Here's what the table looks like on my website: http://s8.postimg.org/m09fkdi5x/Capture2.png
Here's the table in the print preview with ScrollY enabled (notice the headers are not alligned): http://s8.postimg.org/48t7s6ddh/Capture.png
Here's the table in the print preview with ScrollY disabled (Headers are now alligned): http://s8.postimg.org/xdvyvksol/Capture3.png
The printing works okay with tabletools, but I'd like to be able to print entire page.
Thank you for your help!
Replies
Hello? :(
Hi,
With scrolling enabled you have to do something like what TableTools does and reassemble the original table. When scrolling is enabled the table is broken into two or three sections thus the misalignment when printing (since print ignores a lot of the CSS applied to the table).
Therefore, there are probably two options:
Not ideal I realise, but that's just how browsers work in print mode :-(
Allan
I've put a post on making scroll-x and scroll-y work in a responsive context here: https://datatables.net/forums/discussion/26578/solution-scrollable-vertical-and-horizontal-responsive-datatables-via-flexbox#latest
Example code here: http://codepen.io/holdencreative/pen/ZYqoMg