CSS: Disable Header & Footer From Print Preview Chrome

javascript css google-chrome css-selectors print-css
Niks Jain picture Niks Jain · Jul 16, 2012 · Viewed 16k times · Source

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

Answer

Michael picture Michael · Oct 12, 2012

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.

Related questions

Force DOM redraw/refresh on Chrome/Mac

Every once in a while, Chrome will render perfectly valid HTML/CSS incorrectly or not at all. Digging in through the DOM inspector is often enough to get it to realize the error of its ways and redraw correctly, so …

Read More
"Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project

I've created a new Foundation 5 project through bash, with foundation new my-project. When I open the index.html file in Chrome an Uncaught TypeError: a.indexOf is not a function error is shown in the console, originating in jquery.min.…

Read More
How can I remove the "No file chosen" tooltip from a file input in Chrome?

I would like to remove the "No file chosen" tooltip from a file input in Google Chrome (I see that no tooltip is displayed in Firefox). Please notice that I'm talking not about the text inside the input field, but …

Read More