I'm trying to print HTML but I'm not able to change the layout and margin of the chrome browser(refer the attached image).
PRINT() { window.print(); } @media print { .doNotPrint { display: none; } * { -webkit-print-color-adjust: exact; } @page { margin: 0 !important; size: A4 Landscape !important; -webkit-print-color-adjust: exact; } html, body { margin: 0 !important; size: A4 Landscape !important; -webkit-print-color-adjust: exact; } } <form [ngClass]="themeSRVC.currentThemeNAME" fxLayout="column" fxFlex> <!-- navBAR --> <mat-toolbar id="idPrimaryTOOLBAR" color="primary" class="doNotPrint"> <mat-toolbar-row> <button mat-icon-button type="button" (click)="routeSRVC.goBACK()"> <mat-icon matTooltip="Go Back">arrow_back</mat-icon> </button> <span class="fillSPACE"></span> <button mat-icon-button (click)="PRINT()"> <mat-icon matTooltip="print">print</mat-icon> </button> </mat-toolbar-row> </mat-toolbar><!-- printableCONTENT -->
<div id=“idToPRINT” fxFlex><div fxLayout="row"> <div fxFlex="33" style="height:200px;background-color:red">Left</div> <div fxFlex style="height:200px;background-color:yellow">Center</div> <div fxFlex="33" style="height:200px;background-color:green"> Right</div> </div>
</div>
</form>
#angular #google-chrome