Datepicker calendar not rendered right when used as ag-grid cell editor

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The calendar should be rendered right when it’s open.

What is the current behavior?

The calendar is rendered on the top left corner of the window

What are the steps to reproduce?

When having an md-input connected to the datepicker and the mat-input-inderline has display: none; the calendar is opened on the top left corner of the page.

Providing a Plunker (or similar) is the best way to get the team to see your issue. Plunker template: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

The datepicker should render under the connected input

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular - 4.3.1 Material design - 2.0.0-beta.8 CDK - 2.0.0-beta.8

Is there anything else we should know?

I found this issue because my css for ag-grid hides the mat-input-underline.

 .mat-input-underline {
     display: none;
 }

[mmalerba]

This is expected if you put display:none on the underline, since the datepicker attaches itself at the underline position. You could try height:0; visibility:hidden; pointer-events:none; to visually hide it, but leave it in the layout so the datepicker knows where to place the popup.

[willshowell]

@nicolae536 I can’t speak to whether it is/isn’t a valid bug, but currently the datepicker does require the underline for position attachment.

https://github.com/angular/material2/blob/ec4ea060a519282b362db0dd066aab54c4994cc1/src/lib/datepicker/datepicker-input.ts#L251-L257

https://plnkr.co/edit/LJFXEinH661F70aLPaLi?p=preview