Angular Materials - md-datepicker display issue on large browser

Question

Im using md-datepicker in my app but it doesnt display right for larger browser widths. Seems to only work as intended for small and x-small widths. Please see screenshot attached.

This happens on Chrome and Safari.

HTML:

<md-datepicker ng-model="data" md-placeholder="mm/dd/yyyy"></md-datepicker>

Ive tried narrowing down the problem using inspector and it may have something to do with the left property value on the md-datepicker-calendar-pane class, but Im not sure.

Answer 1

I had this issue. table width was set globally as 100% in an app. The following fixed it:

.md-datepicker-calendar-pane table {
  width: auto;
}

Answer 2

Check your css

I had something like this which was causing your exact issue

table {border-collapse: collapse; width: 100%;}