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:

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

What is the best way to implement filter functionality for individual columns in an Angular material table using ngFor?

I am using ngFor to populate my column names and corresponding data in Angular. How can I implement a separate filter row for each column in an Angular Material table? This filter row should appear below the header row, which displays the different column ...

javascriptangulartypescriptangular-materialmaterial-ui

Maintained grid column stability amidst various modifications

I have a complex 2-column grid layout, and the example shown here is just one part of it. The complete code follows a similar structure. I am looking for a way to ensure that the green box always stays close to the red box in the layout, without having a ...

csscss-grid

Utilizing SCSS variables

Currently, I am in the process of developing an Angular 4 application using angular-cli and have encountered a minor issue. I am attempting to create a component that has the ability to dynamically load styling. The ComponentX component needs to utilize a ...

angulartypescriptangular-cli

Angular Delight: Jaw-Dropping Animation

After setting up my first Angular project, I wanted to incorporate Angular Animations to bring life to my content as the user scrolls through the page. I aimed to not only have the content appear on scroll but also implement a staggering animation effect. ...

htmlcssangulartypescriptanimation

What is the reasoning behind having blank space between the buttons?

Can anyone help me understand why there is visible space between the buttons in the code example provided below? Despite removing margins and paddings, the whitespace persists. <body> <div class="button-container"> <button>1& ...

htmlcssbutton

Tips for altering the color of an image using CSS attributes

I am looking to create a male Head component in this design draft and modify the CSS according to the skin prop. I have attempted to use filter and mix-blend-mode properties, but have not found a solution yet. Any guidance on how to achieve this would be ...

cssvue.jsfilterfigmamix-blend-mode

Creating a column heading that appears at the top of each column break with the help of CSS column-count

Is there a way to output a list into x number of columns within a content div without specifying the exact amount of columns in CSS? I also want to include a heading at the top of each column: Firstname Lastname State Firstname Lastname State ...

htmlcssmultiple-columns

Warning: Angular Compilation Issue - Deprecation Advisory

After upgrading to Angular 13, I've been encountering this deprecation warning. TypeError: message.trim is not a function at Function.Rule.FAILURE_STRING (/home/app/node_modules/tslint/lib/rules/deprecationRule.js:30:81) at cb (/home/app/node_modules ...

angularbuildcompiler-warningsdeprecation-warning

There appears to be an empty void on the website

If you could kindly click on this link & use CTRL + F to search for the text "Info", you will see a visual representation similar to the image below. There seems to be quite a bit of empty space below these texts. I experimented with padding, display: ...

htmlcss

Noticed a peculiar outcome when working with hexadecimal calculations in LESS. What could be causing this phenomenon?

I recently dove into the world of LESS and have found it to be quite interesting. However, I encountered a unique situation where a background color was assigned the code #03A9F4 - 100. Based on my limited knowledge of hexadecimal numbers from some IT clas ...

cssless

Use jQuery to retrieve HTML content excluding comments

Take a look at the code snippet below. HTML: <div> <p>sdfsdfsfsf</p> <!--<p>testing</p>--> </div> JQUERY $(document).ready(function(){ alert($("div").html()); }); OUTPUT <p>sdfsdfsfsf</p> & ...

jqueryhtmlcss

PrimeNG's Angular component pTree TreeNode

Is there a way in Angular to retrieve the positions of nodes within a TreeNode hierarchy based on their display order? I have data structured as TreeNode objects, which include children that can branch off further. How can I access these nodes according t ...

angulartypescriptprimengtreenodeboost-propertytree

Issues encountered when trying to combine ASP.NET Core with Angular 2 using the cli init feature

I am in the process of setting up a new ASP.NET Core project. In the "wwwroot" folder, I executed the command "ng init" via cmd to initialize Angular. After restoring packages, I hosted my ASP project on Kestrel. However, I encountered compile-time errors ...

c#asp.netseleniumangular

Styling Process Steps in CSS

Just starting out with CSS! I'm looking to replicate the Process Step design shown in the image. https://i.stack.imgur.com/Cq0jY.png Here's the code I've experimented with so far: .inline-div{ padding: 1rem; border: 0.04rem gray ...

javascripthtmlcss

Tips for ensuring a webpage loads at a specific resolution

I recently created a website on my computer with a screen resolution of 1920x1020. However, when I view it on other machines with a 1366x768 resolution, the website appears distorted. Is there a way to set a fixed resolution for my website to ensure it l ...

javascripthtmlcss

Dynamic CSS sizing

Currently, I am in the process of creating a component and my goal is to achieve a specific layout without the use of JavaScript, preferably utilizing flexbox. Essentially, envision a messenger chat screen with a header and footer containing controls. htt ...

cssflexbox

Adjust the size of the labels on a grouped bar chart using Angular Chartjs

I just started working with Angular and Chart.js, and I have the following code for my bar chart: const chart = new Chart(this.ctx, { type: 'bar', data: { labels: labels, datasets: [{ label: 'Success Prediction Count', ...

angularchartsangular-materialchart.jsbar-chart

What is the best approach to make the child element function properly within my CSS grid design?

I've been struggling to set up a 3-column grid with 2 rows for showcasing my projects on my portfolio. Unfortunately, they are only appearing in the first column and I can't figure out how to fix it. Here's a visual representation of the is ...

htmlcsscss-grid

Cannot Display CSS Background Image Locally

Apologies for the simple inquiry, but I am facing an issue with displaying my background image using background-image:url() in the CSS. Strangely, it does not work with this method, but when I use content:url(); it works just fine. Interestingly, backgrou ...

javascripthtmlcss

Angular automatically protects routes by default

In the application I've created, there is a requirement for most routes to be protected and accessible only when logged in. Is it feasible to implement a default route guard while also specifying certain routes that should remain open? ...

angular