select: default scroll position incorrect when using md-select-header

[bunjiboys]

Actual Behavior:

• What is the issue? * When opening the mdSelect drop down, the list is scrolled past the mdSelectHeader which effectively hides it, when the list is long enough to start scrolling
• What is the expected behavior? The mdSelectHeader should be at the top of the drop down panel

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: Is present with the default CodePen (forked at http://codepen.io/bunjiboys/pen/ryRwQv)
• Details:

AngularJS Versions: *

• AngularJS Version: 1.5.11
• AngularJS Material Version: 1.1.3

Additional Information:

• Browser Type: * Google Chrome
• `Browser Version: *

  Google Chrome   56.0.2924.87 (Official Build) (64-bit)
  Revision    0e9a9a6f3676ae439b78cd9b3f62b4193c3ac7d5-refs/branch-heads/2924@{#895}
  OS  Mac OS X 
  JavaScript  V8 5.6.326.50

• OS: * macOS Sierra 10.12.3 (16D32)
• Stack Traces: N/A

---

Shortcut to create a new CodePen Demo. Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions. Add more lines if needed.

[markwpiper]

+1

It's possible to work around this by setting the .scrollTop of the md-content inside the md-select-menu, on a delay triggered by md-on-open.

Coffeescript workaround:

scope.onOpen = ()->
  opened = false
  scrollSelectHeaderInView = ->
    el = $("md-select-menu md-content._md")
    if !opened && el.length > 0
      opened = true
      el[0].scrollTop = 0
  $interval(scrollSelectHeaderInView, 40, 10, false)
  opened

[alonetech]

for ios put the below css :

md-select-menu md-content {
    -webkit-overflow-scrolling: auto !important;
}

[Splaktar]

This is reproducible with AngularJS Material 1.1.7 and AngularJS 1.6.7 as well.

[Splaktar]

@srikanthdarmapuri please 👍 the OP so that we can sort by popular issue reactions. Please refrain from adding +1 comments to issues.

[rishabh19991]

I also faced the same issue, and here is my workaround using jQuery $('md-select-menu md-content._md').scrollTop(-10);

Waiting for some proper solution.