CODEWITHSUNDEEP
htmlcssprintingangular7printscreen
Kali
Kali

Reputation: 147

content width not working in print screen

I am trying to print the receipt page below. It looks like as below in the browser. The content in the middle(with white background) has fixed width and is centered. I am using angular 7 and bootstrap 4

enter image description here

When i try to print it from my code using window.print() , the width of the content doesn't show correctly. The content which is in the white background takes full width of the page when in print mode. Below is how it shows in the print preview in chrome. I want the print preview to be similar as it was in the browser.

print preview

Below are the scss i am using

  1. For the grey background

      .background {
       height:100%;
       width: 100%;
       background-color: #E9E8EA; //Grey
       margin: 0px;
       padding: 0px;  
  }

  2. For the receipt content in the middle

       .content {    
         height: 85.33%; 
         width: 35.95%; 
         border-radius: 5px;
         background-color: #FFFFFF; //white  
         padding-top: 1.47%;
         padding-bottom: 2.21%;    
     }

I would really appreciate if someone gives me idea on this.

Upvotes: 1

Views: 3967

Answers (1)

Nova
Nova

Reputation: 364

You need to use @page or @media print in your css.

https://www.sitepoint.com/css-printer-friendly-pages/

Upvotes: 1

Related Questions