I'm using Chrome 92.0.4515.107.
When I click on the print button, the print preview pops up, but the website loses its styles.
As you can see, the first image is before I click on print:
But after I click and the print preview pops up, I get this:
This doesn't happen when I use Firefox.
I've had success with this:
<link rel="stylesheet" media="print" href="print.css" />
This links a stylesheet to style the printed page.
You could also try a print media query to do the same effect:
#media print { }
Related
I am having trouble with mobile classes contained within media queries being incorrectly applied in a chrome browser on print.
When clicking ctrl+p to print (through chrome browser) on desktop -> my mobile classes are being applied for the full screen, and the print version is incorrect. I want to ensure a user can print from desktop through chrome browser and mobile styles/classes/layouts will not get injected to the print version.
I have a print button on the page and a print specific stylesheet. There are no problems with the print button, the problem only occurs when browser printing and only in chrome. Weirdly, it works correctly in firefox and IE (go figure!).
I have tried including an additional print specific stylesheet in my header like this:
<link rel="stylesheet" href="/_css_/print.css" type="text/css" media="print" />
And within this print.css stylesheet (compiled from SCSS) I've tried various different versions of wrapping all the styles in: #media print { } all to no avail.
Thank you in advance for help with this troublesome chrome printing!
Try putting your mobile styles within #media screen:
#media screen and (max-width: 800px) {
}
I'm trying to hide parts of my page for print. Found a solution with #media print and added this code to my page:
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Then I've added the class="no-print" to divs I didn't wont to print. Works like magic on Chrome but IE (8-11) ignores it completely and print all objects.
You can see the print function in the following page.
You can see that the print icon and the green tabs are not show in Chrome but are in IE.
BTW, on FireFox for some unknown reason I don't even see the print icon... /:
Thanks in advance for any help provided,
Guy.
I'm not sure why your method won't work on IE. IE is a pain.
Adding a stylesheet like this:
<link rel="stylesheet" href="http://rom.guywalderonline.com/templates/shaper_istore_ii/css/print.css" type="text/css" media="print" />
and adding your print specific CSS to the print.css file works for me in IE.
This is what the free AddPrintStylesheet extension does: http://extensions.joomla.org/extensions/style-a-design/print-a-pdf/20611
Usecase: Clicking on a link opens an overlay with some content in it. There are many such links on the page, each of which has a corresponding content that loads inside the overlay. User should be able to print only the particular content.
Approach: On clicking the link, I am setting a class called "printer" to the body. Inside print.css, I am hiding all the page content EXCEPT what I see inside the overlay. On closing the overlay, I am removing the class from the body.
Issue: Everything seems to be working fine on FF and IE. On Chrome the print dialog hangs, whereas on Safari, I see a blank page.
Any help would be appreciated to understand what I might be doing wrong OR if any other approach exists.
you can use media type to apply a stylesheet that is used only for print.
<link rel="stylesheet" type="text/css" media="print" href="yourPrint.css"/>
or use #import within your current stylesheet
#media print {
/* style sheet for print goes here */
}
for more info regarding this, check out w3.org http://www.w3.org/TR/CSS2/media.html
and for a less technical albeit less reliable source, http://www.w3schools.com/css/css_mediatypes.asp
Use Print CSS
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
I have printer stylesheet setup on my site. It works in all browsers but Chrome. Chrome shows nothing in the print preview and when I attempt to print Chrome prints nothing. If I remove the print stylesheet and click print it shows the entire page including hidden portions of the page that should not display. Not sure what to do or why it is not working.
Have others seen this behavior? What can I do? What code do you need to see?
Here is the way the print stylesheet is called if something is wrong?
<link href="print.css" media="print" type="text/css" rel="stylesheet" />
The issue appeared to have been a caching issue. Once I refreshed the cache and corrected earlier errors the issue resolved itself.
I want to print my table that contains some css styles too. But whenever I run window.print(), the output appears without any applied css to styling headers and footers.
I've used <link rel="stylesheet" href="print.css" type="text/css" media="all" /> in my code. Also I tested it with media="print". But still I have a print preview without any style.
What should I do?
media=print should do.
Make sure you have also checked the "print images and colors" in page setup while seeing the Print Preview.