Margin bottom not getting applied in the Print window in Angular

0
votes

I have running Angular 12 application and I have integrated print functionality. I don't want to display header and footer in the print page, so I have added margin:0; I have added margin in the body, but somehow only margin-top is getting applied and not the margin-bottom.

Is there any way to add margin-bottom for every page.

Stackblitz code: https://stackblitz.com/edit/angular-ivy-oufgr5?file=src%2Fapp%2Fapp.component.html

styles.scss

@media print {
  @page {
    margin: 0;
  }

  body {
    padding-top: 1in !important;
    padding-bottom: 1in !important;
    padding-left: 0.3in !important;
    padding-right: 0.3in !important;
  }
}

enter image description here

1
javascriptcssangulartypescript

1 Answers

0
votes

You can try this, just mess around with the values in order to get the desired result

@page {
  margin-bottom: 1cm;
  margin-top: 1cm;
}

/*You can add this as an extra for compatibility*/
@media print {
  body {
    margin-top: 1cm !important;
    margin-bottom: 1cm !important;
    margin-left: 0.3cm !important;
    margin-right: 0.3cm !important;
  }
}