Angular 4 DatePicker material does not open at correct position
I am using Material Datepicker (2.0.0-beta.6) component in my application. I can add it correctly, but whenever I open it, it opens in the upper left corner of the page. Ideally it should open next to 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 {}
See screenshot.
Your help would be appreciated.
+3
source to share
2 answers
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
app.component.html
<md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import 'hammerjs';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdDatepickerModule, MdNativeDateModule, MdInputModule} from '@angular/material';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MdInputModule,
/*Datepickar */
MdDatepickerModule,
MdNativeDateModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Demo
0
source to share