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
Related
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 { }
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 have an alignment issue only in Chrome and am using the following Chrome CSS hack in my print.css:
#media screen and (-webkit-min-device-pixel-ratio:0){
.invoiceTable .smallerInput{
margin-top:9px !important;
}
}
When I go to print preview, the style has not been applied.
If I add the Chrome only CSS hack into the normal page view CSS, I can see that the styles are applied correctly in Chrome and not affected in other browsers. Seems like it isn't detected for the print preview for some reason.
Does anyone know how to get it to work on the print preview for Chrome?
You need to use
#media print
to target a printer.
Use link tag
<link rel="stylesheet" href="my-sample-print-style.css" media="print"/>
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 a asp.net mvc application and my Views are in HTML5. I need to print a view as a report. This View shows some data with <table/> tag and it is formatted with css style as font-family, font-size, text-align properties etc. When I try to print it with Chrome (exporting to PDF) my css does not work, I mean, the print's result is shown without formating.
What can I do to solve this problem? It Does not matter whether I use css to apply the style or use html tags to format the page, but I wish it would leave the impression formatted.
PS: I would like to keep the html valid document.
You need to split up the css for screen and print separately just by following setting
<link href="css/main.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/print.css" media="print" rel="stylesheet" type="text/css" />
then no need to change your html code just change the css or duplicate the old css.
You can use different styles for screen and print media in your style sheet, i.e.
#media screen
{
table.test {
font-family:"Times New Roman",Georgia;
font-size:10px;
// more
}
}
#media print
{
table.test {
font-family:Verdana, Arial;
font-size:10px;
// more
}
}
When you'll print the table only styles defined in print media will be applied.
Check this for more.
You can try to define the css semantics with #media print rule, then stylize the stylesheet with that in mind. Maybe this help.