CODEWITHSUNDEEP
javascriptcssgoogle-chromecss-selectorsprint-css
Niks Jain
Niks Jain

Reputation: 1647

CSS: Disable Header & Footer From Print Preview Chrome

one of my application is web based POS(Point Of Sale). so while printing invoices in chrome. the page header and the page footer automatically inserted by the browser that I want to supress via the page and without user intervention..

I applied some CSS over-here in print-media,

@media print {
 #header, #footer { 
    visibility: hidden !important;
    display: none !important;
 }
}

But it's not applying, maybe the selector isn't correct?

And I also tried by reducing the margin as well, but its cutting/ overriding the page-content, if print has multiple pages.. And one more thing, i don't want to disable the print preview option for chrome..

Any one has good solution for this?

Best Regards..

Upvotes: 11

Views: 17866

Answers (2)

diego nunes
diego nunes

Reputation: 2828

. . I'm not sure how knowledgeable you are in development, but the CSS selectores must match some elements. The [page] "header" and [page] "footer", as in "[printed] page", not as in "[web] page", can't be targeted by CSS like that--especially not with arbitrarily chosen IDs, and ones that would probably collide with your own page IDs and that browser vendors would never accept to implement.

. . The suggestion of using "margin: 0 auto;" on a "@page" directive is actually correct (since the browser doesn't have enough margin for them to show, it will just hide them). The problem is that currently only Chrome supports it correctly. With other browsers you have no good options besides creating a PDF and printing it. You can create a self-printable PDF that will show the print dialog as soon as it loads up using JavaScript embedded on it, though, but I think it's the farthest you can go.

. . Good luck.

Upvotes: -1

Michael
Michael

Reputation: 2165

use

@page{margin:0px auto;}

in your css script. This will most likely throw off your page layout when printing, so you'll probably want to add a #container div with the correct padding to make your page look good again. Only tested on Google Chrome.

Upvotes: 27

Related Questions