Styles in print CSS are not effective in an Angular project

Currently, I am working on an Angular project where I need to generate a printable document using CSS. The challenge I am facing is ensuring that the date and title in the header do not print automatically when the document spans multiple pages. Additionally, I want to set margins for the printed document. To tackle this issue, I have followed the guidance provided in this answer on Stack Overflow. However, I am encountering difficulties in applying the styling as intended.

In my CSS code, I have included the following:

@media print {
  @page { 
    size: auto;
    margin: 0; 
  }
  body { 
    margin: 2cm !important;
  }
}

I have attempted to incorporate this code into both the app.component.scss file and the styles.scss file, but neither approach seems to be effective. Any recommendations or insights on how to resolve this issue would be greatly appreciated?

cssangularprinting

Answer №1

To apply custom css to your webpage, you should include the following code in your styles.css file:

@media print {
  @page { 
    size: auto;
    margin: 0mm; // added mm
  }
  body { 
    margin: 2cm;
  }
}

If you require specific styling for components, you can define that in the respective component's css file as shown below:

@media print {
  section {
    color: orange;
  }
}

For a live demonstration, check out this Stackblitz example. Feel free to test the print functionality on this page () to see the changes with the header date removed and the customized section text displayed in orange.

UPDATE

If you want to remove the footer and header when printing, simply deselect the option in the print settings as shown in this image: https://i.sstatic.net/VN77a.png

By doing this, there will be no need to set the 0mm margin for the @page selector and the 2cm margin for the body selector in your css code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Child element within a nested CSS grid expands or shifts beyond its container

Explore my CodePen project here Greetings, I am currently working on creating a grid layout showcasing 6 links to various projects. Each link is comprised of an image template along with a detailed text description below it. The parent container for each ...

csscss-grid

I am looking to modify the background color of characters in a text box once the characters in a textarea exceed 150 characters

Currently, I am utilizing event.data to capture the text inputted into this particular HTML textbox. My intention is to change the background color to red based on that input. However, when using the style attribute on event.data, I encounter an error. It& ...

javascripthtmlcssweb

Creating equal height nested columns in Bootstrap 3 Grid: ensuring all nested columns are uniform in height

Struggling to make sure all columns in Bootstrap 3 are the same height throughout the page? If you've managed to achieve this with 3 columns, like the example provided here, great job! However, the challenge arises when dealing with nested columns t ...

jqueryhtmlcsstwitter-bootstrap-3grid

The Void Ionic type does not have the specified property available

Struggling to load markers when the button is clicked to find nearby gyms. Despite loading the map to my location upon click, no markers are displayed and an error indicating that then does not exist on type 'void' within IonViewDidLoad. gyms.ht ...

angulargoogle-mapstypescriptionic-frameworkionic3

JavaScript code using the Jquery library to retrieve the following article from 'cached memory'

I am aware of the easier CSS options for my question, but I am determined to learn JS (Jquery), so please bear with me. My plan: Menu-items are connected to articles within my content division. Initially, only the first article (#intro) is displayed. All ...

javascriptjquerycsshtml

`The height attribute of the textarea element is not being accurately adjusted`

When I tried to match the width(178px) and height(178px) of my table to the width and height of a text area upon clicking a button, I encountered an issue. While setting the width works perfectly fine, the height is being set to only 17px. It seems like ...

javascripthtmlcss

What is it about the phone screen that makes media content so captivating?

My phone has a resolution of 2280x1080. I noticed that when using the following code, the background color changes to blue on my phone: @media (max-width: 500px) { body { background-color: blue; } } Interestingly, this feature stops working once "compute ...

htmlcssmedia-queries

What's the best way to use the keyboard's enter key to mark my to-do list

I'm looking to update my todo list functionality so that pressing enter adds a new todo item, instead of having to click the button. <h1 style="text-align:center">Todo List</h1> <div class="container"> ...

htmlangulartypescript

What is the most effective method to horizontally center a div element when its width and height are not predetermined

Let's say there is a div element on the page like this: <div class="center"></div> The CSS style for this div may look something like this: .center{ background:red; position:absolute; left:50%; top:50%; margin-left: ...

htmlcsscss-expressions

Having trouble getting a constructor to function properly when passing a parameter in

Here's the code snippet I'm working with: import {Component, OnInit} from '@angular/core'; import {FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase} from 'angularfire2/database-deprecated'; import {Item} ...

javascriptangulartypescriptfirebaseangular5

Inconsistency in updating RxJS Observable item within an Observable list

I am working with an observable list of items that are manually set through a subject by calling next. However, I have noticed that when the data in the observable list is updated to include a filtered item, the corresponding observable item is not being ...

angularrxjsobservable

Creating an RxJS observable stream from an event emitted by a child element in an Angular 2 component template

Currently incorporating Angular 2.0.0-rc.4 alongside RxJS 5.0.0-beta.6. In the midst of exploring various methods for generating observable streams from events, I find myself inundated with choices and would like to gather opinions. Recognizing that there ...

typescriptangularrxjsobservable

Secret icon revealing on mouseover

I devised a simple technique to showcase an element overlapping another, like an overlay, and it was functioning flawlessly until the point where I needed to incorporate a "button" (styled as a Bootstrap anchor) beneath it. Here is the initial setup and h ...

htmlcss

When trying to run the npm start command, an error occurs referencing type

I am facing difficulties running my project locally due to broken dependencies, and I'm struggling to find a solution. When attempting to install the node modules, I encountered errors, so I made changes to the following dependencies: "codelyze ...

angularnpmlodashnpm-start

I'm looking for a sample of RadPieChart for nativescript + angular. Can anyone help me out?

I'm currently working on a multi-platform application that requires a PieChart to be displayed on the main screen. Can someone point me to a comprehensive example of how to implement this? I have tried following this guide and modifying it according ...

angulartypescriptnativescriptnativescript-angular

The configuration file tsconfig.json did not contain any input

After downloading angular2-highcharts through npm for my application, I encountered an error in the tsconfig.json file of the package while using Visual Studio Code: file: 'file:///c%3A/pdws-view-v2/node_modules/angular2-highcharts/tsconfig.json&apos ...

jsonangulartypescriptangular2-highcharts

Angular2 Dropdown Menu with Arrow Key Scrolling

When you interact with the Select Market feature in the following plunk, an Observable is filled with data in an array format. The initial item in the list is highlighted in yellow due to a 'selected' property being set. However, there is an issu ...

angular

Angular code for opening a PDF from an API response in a new tab

It's been nearly three days and I could really use some assistance with this issue I'm facing. Inside my Node application, there is an API call that utilizes HTTPS to connect to an external API and retrieve a PDF file. The PDF code snippet looks ...

node.jsangularrestpdf

Disabling an attribute/element from change detection in Angular

Let's say I have the following code in my template: <img src="..." alt="myService.getImgAlt()" /> This works fine, but calling this function at every change detection can impact performance negatively. Is there a way to excl ...

angularangular-templateangular-changedetection

"Implement a feature that allows for infinite scrolling triggered by the height of

Looking for a unique solution to implement a load more or infinite scroll button that adjusts based on the height of a div. Imagine having a div with a height of 500px and content inside totaling 1000px. How can we display only the initial 500px of the div ...

javascriptcss