I have a report page that when you view the page there is a minimal gap between the charts and the headers:
But if the user prints or print previews the page there is a HUGE gap between the some (but not all) of the elements:
I've tried setting Chrome up to use the print media type in the Developer Tools which applies the correct styles but doesn't result in that gap. Can anyone suggest a way to troubleshoot this?
Related
I'm working on printing product web page. Employ #media print {...} to customize components for proper appearance on print canvas. But one issue I even can't understand how to drill to the root of the problem. The issue is that 3 out of 5 total pages are blank. First two pages rendered with content and then three blank pages. Chrome print preview popup window just give result and I have no clue what component(s) responsible for "printing" blank pages.
I find how to use chrome devtool to emulate print canvas and drill down to trouble maker
I'm working on a webpage that has a different "print to PDF" result (after Ctrl+P -> Save to PDF in Chrome) than the original web display by using #media print in the CSS code.
I'm using a variable font with the parameter font-variation-settings:"wght", but the generated PDF seems to ignore this parameter when used in #media print.
Yet, when using the Chrome tool "Inspector>Rendering>Print emulate CSS media type", changes of this parameter are taken into account in the displayed web page!
Looks like the problem comes from the Ctrl+P interface, any ideas on how to handle this?
Thank you in advance.
Please see https://bugs.chromium.org/p/chromium/issues/detail?id=1070089 - this should be fixed now, you may want to retest with a recent Chrome Canary build and see if the issue is indeed gone.
I'm attempting to perform some styling to handle page breaks when printing, to ensure my content does not get cut in half.
I know the styles requried to perform this (page-break-inside etc) but attempting to verify they work is a rather laborious task, especially when i can't query the DOM whilst its showing me the preview.
In Chrome (or any other browser for that matter) is it possible to put the page into print mode and have it render where the page breaks will be placed?
Currently i can use Dev tools to enable the print media queries, but the only way to see where the page breaks will take place is to actually bring up the print preview. However when thats up i can't interact with the DOM to see why elements do or don't get cut in half by the break.
When it all works this isn't really an issue but as we all know things tend to behave oddly more often than not!
Thanks
I'm trying to print this page under the link graded fabric ArcCom in IE and Firefox. However, it's only printing the first page, without the complete table. How can I fix this problem? Any suggestion?
I suppose you mean link “graded fabrics,” which points to http://www.calibredesign.com/clients/spec/fps_fabric_arc.html (though if you follow the link the simple way, this page opens in a frame). Viewed separately (after right-clicking on the link and selecting “Open in new window”) it seems to get printed OK.
The reason why it does not print OK when opened in a frameset may depend on the large number of HTML syntax errors on the page. Errors like missing </table> tags may confuse browsers in printing.
I have a web database app that runs in IE7+ (customer requirement) It is a shop control system that needs to send forms to the printer.
I've got #media print css set up to format the form properly when going from screen to printer. Mostly everything has been working fine.
I've recently added some jquery code to handle placing a footer at the bottom of the page with a variable size table above it. That works as expected except occasionally the footer is thrown to a second page on the printer even though it displays in the proper place on the screen.
So, my question is how can I get print preview to allow me to inspect the document elements so I can figure out what's throwing things off? I've got the IE Developer Toolbar, but it doesn't seem to give access to the print preview.
Thanks for any help.
I would suggest throwing different colored borders on your elements in your #media print css file. This is always useful in debugging layout issues and should show up in the print preview.