How to hide Angular 9 background component for @media print while printing mat-dialog?

Issue

Here is my styles.css file, here app-labour-value-estimate-print-layout is a mat-dialog component which is over app-material-details component. When I try to print this mat-dialog, things from background pops out and so app-root > * { display: none;} this helped. However when added this code, any other components are not displayed in print as they as nested in app-root. How do I print root components as well as mat-dialog component without interference from background?

@media print {
  /*app-root > * {
    display: none;
  }*/
  app-footer  {
    display: none;
  }
  app-labour-value-estimate-print-layout {
    display: block;
  }
  app-material-details {
    display: block;
  }
}

Solution

Try this inside media-print

.cdk-overlay-pane {
  width: 100%;
  max-width: none;
}

mat-dialog-container {
 width: 100vw;
 height: 100%;
 min-height: 100vh;
 padding: 0;
 margin: 0;
}

Answered By - Aakash Garg