title: Unable to change the margin & layout for printing in chrome browser from angular 2
body: <p>I'm trying to print HTML but I'm not able to change the <strong>layout</strong> and <strong>margin</strong> of the <strong>chrome browser</strong> (refer the attached image).</p>
  
  <p><a href="https://i.stack.imgur.com/b1Sjr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b1Sjr.jpg" alt="This 1) Layout &amp; 2) Margin remains the same"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>PRINT() {
    window.print();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form [ngClass]="themeSRVC.currentThemeNAME" fxLayout="column" fxFlex&gt;
    &lt;!-- navBAR --&gt;
    &lt;mat-toolbar id="idPrimaryTOOLBAR" color="primary" class="doNotPrint"&gt;
      &lt;mat-toolbar-row&gt;
        &lt;button mat-icon-button type="button" (click)="routeSRVC.goBACK()"&gt;
          &lt;mat-icon matTooltip="Go Back"&gt;arrow_back&lt;/mat-icon&gt;
        &lt;/button&gt;
        &lt;span class="fillSPACE"&gt;&lt;/span&gt;
        &lt;button mat-icon-button (click)="PRINT()"&gt;
          &lt;mat-icon matTooltip="print"&gt;print&lt;/mat-icon&gt;
        &lt;/button&gt;
      &lt;/mat-toolbar-row&gt;
    &lt;/mat-toolbar&gt;
  
    &lt;!-- *****printableCONTENT***** --&gt;
    &lt;div id="idToPRINT" fxFlex&gt;
  
      &lt;div fxLayout="row"&gt;
        &lt;div fxFlex="33" style="height:200px;background-color:red"&gt;Left&lt;/div&gt;
        &lt;div fxFlex style="height:200px;background-color:yellow"&gt;Center&lt;/div&gt;
        &lt;div fxFlex="33" style="height:200px;background-color:green"&gt; Right&lt;/div&gt;
      &lt;/div&gt;
  
  
    &lt;/div&gt;
  
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Am I missing something..? please help me to remove the margin and change the layout.</p>