title: DatePicker not working inside a Mat Dialog window
body: <p>I am trying to create a form, which contains two start/end date Date pickers using Angular Material. For some reason, when I add the date picker inside the form in the Dialog window, the layout of the dialog is not rendered propely as it can be seen from the image. What can be the cause of this?</p>
  <p>Template:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;consumption-form&quot;&gt;
      &lt;form [formGroup]=&quot;consumptionControl&quot; id=&quot;consumptionForm&quot;&gt;
          &lt;p class=&quot;consumption-field&quot;&gt;
              &lt;mat-form-field hintLabel=&quot;Max 10 characters&quot; appearance=&quot;fill&quot;&gt;
                  &lt;mat-label&gt;BGpoint&lt;/mat-label&gt;
                  &lt;input matInput #BGpoint maxlength=&quot;10&quot; placeholder=&quot;BG5521900640000000000000001668712&quot; formControlName=&quot;BGpointControl&quot;&gt;
                  &lt;mat-error&gt;
                      &lt;span *ngIf=&quot;consumptionControl?.controls.BGpointControl?.errors?.pattern&quot;&gt;Field should contain 10 numeric
            characters!&lt;/span&gt;
                  &lt;/mat-error&gt;
                  &lt;mat-hint align=&quot;end&quot;&gt;{{BGpoint.value?.length || 0}}/10&lt;/mat-hint&gt;
              &lt;/mat-form-field&gt;
          &lt;/p&gt;
          &lt;p class=&quot;consumption-field&quot;&gt;
              &lt;mat-form-field appearance=&quot;fill&quot;&gt;
                  &lt;mat-label&gt;Choose a start date&lt;/mat-label&gt;
                  &lt;input matInput [matDatepickerFilter]=&quot;myFilter&quot; [matDatepicker]=&quot;picker&quot;&gt;
                  &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
                  &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
              &lt;/mat-form-field&gt;
          &lt;/p&gt;
  
          &lt;button mat-raised-button type=&quot;submit&quot; (click)=&quot;submit(BGpoint) &quot; mat-icon-button matTooltip=&quot;Click to search for results &quot; [matTooltipPosition]=&quot;position.value &quot; [matTooltipShowDelay]=&quot;500
                  &quot; [matTooltipHideDelay]=&quot;500&quot;&gt;
              &lt;mat-icon aria-label=&quot;Search button icon &quot;&gt;search&lt;/mat-icon&gt;
          &lt;/button&gt;
  
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Component ts:</p>
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormControl, Validators } from '@angular/forms';
  import { TooltipPosition } from '@angular/material/tooltip';
  
  @Component({
    selector: 'app-consumption-details',
    templateUrl: './consumption-details.component.html',
    styleUrls: ['./consumption-details.component.css']
  })
  export class ConsumptionDetailsComponent implements OnInit {
  
    myFilter = (d: Date | null): boolean =&gt; {
      const day = (d || new Date()).getDay();
      // Prevent Saturday and Sunday from being selected.
      return day !== 0 &amp;&amp; day !== 6;
    }
    
    consumptionControl: FormGroup;
    private positionOptions: TooltipPosition[] = ['after', 'before', 'above', 'below', 'left', 'right'];
    position = new FormControl(this.positionOptions[0]);
    constructor() { }
  
    ngOnInit(): void {
      this.consumptionControl = new FormGroup({
        BGpointControl: new FormControl('', [Validators.minLength(1), Validators.maxLength(20), Validators.pattern(&quot;*&quot;)]),
      });
    }
    submit(BGPoint:string){
  
    }
  
  }
  </code></pre>
  <p>The Dialog window is displayed as a white strip on the left side of the screen that goes from top to bottom.</p>