title: Angular/Material mat-datepicker does not show in proper location
body: <p>I am utilizing Fuse theme for an angular website. here is the layout:</p>
  
  <pre><code>&lt;div class="content p-24"&gt;
      &lt;div fxLayout="column" fxLayoutAlign="start start" fxLayout.gt-md="row" fxFlex="50"&gt;
              &lt;form class="mat-white-bg mat-elevation-z4 p-24 mr-24 mb-24" fxLayout="column" fxLayoutAlign="start" fxFlex="1 0 auto"
                name="form" [formGroup]="form"&gt;
      ...
                &lt;div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto"&gt;
                  &lt;mat-form-field fxFlex="100"&gt;
                    &lt;input matInput [matDatepicker]="picker" placeholder="Choose a Start date" (dateChange)="startDateChange()"
                      formControlName="start"&gt;
                    &lt;mat-datepicker-toggle matSuffix [for]="picker"&gt;&lt;/mat-datepicker-toggle&gt;
                    &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
                  &lt;/mat-form-field&gt;
                &lt;/div&gt;
      ....
      ...
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>However the datepicker picker is not showing in the right location on the page, it appears far off to the right of the page as it is %100 width:
  <a href="https://i.stack.imgur.com/H5FoU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H5FoU.png" alt="enter image description here"></a></p>
  
  <p>Any ideas how to take to where it belongs?</p>