Angular 4 Material DatePicker is not opening at correct position

Question

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.

Please see the code below.

Demo.html

    <div class="col col-2 col-spacing">
        <md-input-container>
          <input mdInput [mdDatepicker]="endDatepicker" placeholder="End Date:">
          <button mdSuffix [mdDatepickerToggle]="endDatepicker"></button>
        </md-input-container>
        <md-datepicker #endDatepicker></md-datepicker>
      </div>
    </div>

DemoModule.ts

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 { }

DemoComponent.ts

import { Component } from '@angular/core';


@Component({
     selector: 'sbom-search-panel',
     templateUrl: './demo.component.html',
})

export class DemoComponent {}

Please see the screenshot.

Your help will be appreciated.

Answer 1

Try to put [touchUi]="true" on the tag md-datepicker. It should work!