CSS: disable header and footer from Chrome preview

Question

one of my applications is web POS (Point Of Sale). therefore, when printing invoices in chrome. The page title and page footer are automatically inserted by the browser, which I want to suppress using the page and without user intervention.

I applied some CSS on top of this in print media,

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

But it doesn’t apply, maybe the selector is wrong?

And I also tried to reduce the margin, but its reduction / redefinition of the contents of the page if the print has several pages. And one more thing, I do not want to disable the print preview option for chrome.

Does anyone have a good solution for this?

Best wishes..

Answer 1

using

 @page{margin:0px auto;} 

in your css script. This will most likely reset the page layout when printing, so you probably want to add the #container div with the correct padding to make your page look good. Verified only on Google Chrome.

Answer 2

., I'm not sure how competent you are in the development, but CSS selectors should match some elements. The headers of the [page] and [page], as on the “[printed] page", and not on the [web page] page, cannot be targeted at CSS in this way - especially not with arbitrary choice of IDs and those that are probably will run into your own page identifiers and that browser vendors will never agree to implement.

., Proposal for the use of "margin: 0 auto;" in the "@page" directive is actually correct (since the browser does not have enough field to display them, it just hides them). The problem is that only Chrome currently supports it correctly. In other browsers, you have no good options besides creating a PDF file and printing it. You can create a self-tuning PDF file that displays the print dialog as soon as it loads using the built-in JavaScript, but I think this is the farthest of you.

., Good luck.