title: Angular 4 Material DatePicker is not opening at correct position
body: <p>I am using Material Datepicker component (2.0.0-beta.6) in my app. I can able to add it properly, but whenever I open it, it open at the top left corner of the page. Ideally it should open beside the datepicker component. </p>
  
  <p>Please see the code below.</p>
  
  <p><strong>Demo.html</strong></p>
  
  <pre><code>    &lt;div class="col col-2 col-spacing"&gt;
          &lt;md-input-container&gt;
            &lt;input mdInput [mdDatepicker]="endDatepicker" placeholder="End Date:"&gt;
            &lt;button mdSuffix [mdDatepickerToggle]="endDatepicker"&gt;&lt;/button&gt;
          &lt;/md-input-container&gt;
          &lt;md-datepicker #endDatepicker&gt;&lt;/md-datepicker&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>DemoModule.ts</strong></p>
  
  <pre><code>import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { NgModule } from '@angular/core';
  
  import { DemoComponent} from './demo.component';
  import { MaterialModule, MdNativeDateModule } from '@angular/material';
  
  @NgModule({
    declarations: [DemoComponent],
    imports: [
      BrowserAnimationsModule,
      MaterialModule,
      MdNativeDateModule,
    ],
    bootstrap: [DemoComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>DemoComponent.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  
  @Component({
       selector: 'sbom-search-panel',
       templateUrl: './demo.component.html',
  })
  
  export class DemoComponent {}
  </code></pre>
  
  <p>Please see the screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/9BZ4C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9BZ4C.png" alt="enter image description here"></a></p>
  
  <p>Your help will be appreciated.</p>