Angular 4 Material DatePicker 未在正确位置打开答案

【问题标题】：Angular 4 Material DatePicker is not opening at correct positionAngular 4 Material DatePicker 未在正确位置打开
【发布时间】：2017-11-06 17:18:19
【问题描述】：

我在我的应用程序中使用 Material Datepicker 组件 (2.0.0-beta.6)。我可以正确添加它，但是每当我打开它时，它都会在页面的左上角打开。理想情况下，它应该在日期选择器组件旁边打开。

请看下面的代码。

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

请看截图。

您的帮助将不胜感激。

【问题讨论】：

尝试导入MdDatepickerModule，因为MaterialModule已被弃用..
是的，我试过这个，但没有运气。我在单独的项目中尝试了同样的事情，它工作正常。我认为我创建的 CSS 文件存在一些问题。某些属性将与 datepicker CSS 重叠。谢谢你的回复:)
你试过beta.8吗？，这个问题应该在最新版本中得到解决。
感谢您的回答，这个问题是因为一些CSS。我纠正了，它对我来说很好。

标签： angular datepicker material-design angular-material

【解决方案1】：

尝试将[touchUi]="true" 放在标签md-datepicker 上。它应该工作！

【讨论】：

感谢您的回答，这个问题是因为一些CSS。我纠正了，它对我来说很好。
@Dat Nguyen => 感谢这个想法，它渲染得更好一些
@Deunz - 实际上我们的一些自定义 css 类覆盖了材质 css 类。删除这些类后，它开始正常工作。
如果有人遇到同样的问题，我的错误 css 是 .mat-input-underline, .mat-form-field-underline 不显示

【解决方案2】：

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

演示

【讨论】：