CODEWITHSUNDEEP
cssangular
Bwizard
Bwizard

Reputation: 1023

How to use Print Styles in an Angular 7 App

I need to print a html form (within an Angular7 App) with minimal margins. The only way thus far I can achieve this is to use Chrome and to adjust the margins manually via the print preview box.

I have tried adding @media print styles & @page styles in both the component css file and the main global stylesheet. I even tried changing the background colour of the html and body tags to green just to see if something was happening. I have changed the rendering in Chrome to print styles so I can see the affects of the CSS, yet still no affect is visible

Tried in both component.css and styles.css

@page {
    size: auto;
    margin: 0;
}

html, body {
    margin: 0;
    background: green;
}

@media print{
    html, body {
        margin: 0;
        background: green;
    }
}

The background green is just so I can see if it works. I will remove when I get it working.

I expect to see the background to go green on the html and body tags when I render to the screen the print styles (or in the print-preview window)

I get no green colour change to the html or body tags and the margins stay at the default amounts.

Upvotes: 0

Views: 2988

Answers (1)

m.popov
m.popov

Reputation: 566

Try to use "!important" for each rule?

@page {
   size: auto !important;
   margin: 0 !important;
}

@media print{
 html, body {
   margin: 0 !important;
      background: green !important;
   }
}

Upvotes: 1

Related Questions