Material: md-datepicker: style issue with chrome 63+

[HamzaMoummid]

Actual Behavior:

• What is the issue? *md-datepicker style issue with chrome versions :
• What is the expected behavior?i use angular version 1.4 and chrome version 62 it works fine.
  But when i update chrome version to version 63 the date picker shows wrong

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
• Details:

AngularJS Versions: *

• AngularJS Version: 1.4
• AngularJS Material Version: 1.4

Additional Information:

• Browser Type: * chrome
• Browser Version: * 63
• OS: * windows
• Stack Traces:

[eknowles]

Can you add more information, please?

[HamzaMoummid]

angular md-datepicker is not showing correct in chrome version 63, but it looks nice in chrome version 62 with the same code
https://stackoverflow.com/questions/47818159/date-picker-style-issue-with-chrome-versions

[johnmcguin]

I am seeing this behavior as well. Angular v 1.5.9, Angular Material v 1.0.9, Chrome v 63.0.3239.84. Looks exactly the same as @HamzaMoummid 's screenshot on SO. Here is a strange thing, though: It doesn't appear to happen on all directives. For example, I have a wizard with two md-datepicker elements. The first one opens with the bug every single time, the second doesn't seem to be affected.

[Splaktar]

https://material.angularjs.org/latest/demo/datepicker is working fine for me on Chrome 63 and 65 on OS X.

Is this only being seen on Windows?
Do you have a CodePen example and reproduction steps?
Is this reproducible with AngularJS 1.6.6+ and AngularJS Material 1.1.5?

[johnmcguin]

@Splaktar , I'm having a hard time recreating this on Codepen as well, but have found a little more information if it helps. When I'm comparing the working codepen with the broken version within my app, I saw that there are two classes which seem to be calculating the wrong width when the datepicker is open.

.md-calendar-scroll-mask and .md-virtual-repeat-scroller elements both calculate an inline width of 308px in the broken version and a width of 340px in the working codepen. Further, if I toggle that calculated width off and on on the .md-calendar-scroll-mask element, the issue resolves itself. I'll still work toward recreating this issue in a codepen as well.

[SatishKumarG]

Add this into your css file.

.md-calendar-scroll-container{
  width:100% !important;
}

[HamzaMoummid]

Thanks @SatishKumarG

[Splaktar]

I'm going to close this as this appears to be unreproducible in a demo and is likely app-specific. As my other requests for info have not been addressed.