CSS: Disable Header & Footer From Print Preview Chrome

Question

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..

Hydric

your code looks fine, though visibility is redundant. Check if your footer and header have id, which match the ones you use in css selector. – Histo

Actually am not able to inspect header's and footer's id or class at print preview...Could you please try at your side..? – Hydric

lol, so you mean not header and footer but page header/footer ? sorry, you cannot hide them via css, but you can convert your page to pdf or doc, which allow much better control over printing, and send this document to printer. – Histo

Its POS machine..so each and every time its not fisible to uncheck header and footer or creation pdf or doc, and then fire print button. Is any other solution have you? – Hydric

then just configure the printer, to not print header/footer. All browsers support this, afaik. And add changing of this setting to your installer, or to deployment manual. – Histo

Answer 1

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.

Calathus

If I could upvote this answer more than once, I would. You are a life saver. Thanks!! – Potheen

This doesn't work if you're printing more than one page. – Shoe

Answer 2

. . 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.

Noellenoellyn