autocomplete: shows dropdown on top even when there is no room

[begemott]

Actual Behavior:

• What is the issue? *
  Sometimes the autocomplete dropdown will be shown at the top of an input, partially out of the screen, but it should be bottom position in this case.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: https://codepen.io/dumchikov/pen/zdRrYO

Steps to reproduce

• The md-autocomplete should not have md-dropdown-position (position should be determined automatically)
• The md-autocomplete's input should be placed below the screen, so the window should be scrolled to see the input.
• Scroll the window until the md-autocomplete's input gets the top of the window
• Focus the input
• The autocomplete dropdown will be shown at the top of input partially out of the screen, but should be at the input's bottom

AngularJS Versions: *

• AngularJS Version: 1.5.5
• AngularJS Material Version: 1.1.4

Additional Information:

• Browser Type: * Chrome, FF, IE
• Browser Version: * Chrome - 60.0.3112.90, FF - 54.0.1, IE - 11
• OS: * Window 7

Another issue reproduced on FF and IE only - after closing the dropdown the window is scrolled to the window top.

[AkhilNaidu09]

I have a work around for the last point (winodw is scrolling to top after closing drop down)

Issue : Another issue reproduced on FF and IE only - after closing the dropdown the window is scrolled to the window top.

_:-ms-input-placeholder, :root {
  body[style] {
    position: inherit !important;
    top: inherit !important;
    width: inherit !important;
  }

  .md-click-catcher.md-wbTheme-theme {
    height: 100%;
    position: fixed;
    width: 100%;
  }
}

[AkhilNaidu09]

If you want to open options list always downwards, this is the workaround we have up to now.

open angular-material.js file

change shouldOpenAroundTarget to True,

function calculateMenuPositions(scope, element, opts) {
      var
        containerNode = element[0],
        targetNode = opts.target[0].children[0], // target the label
        parentNode = $document[0].body,
        selectNode = opts.selectEl[0],
        contentNode = opts.contentEl[0],
        parentRect = parentNode.getBoundingClientRect(),
        targetRect = targetNode.getBoundingClientRect(),
         shouldOpenAroundTarget = true,

[alexthewilde]

Another effective workaround is to simply use md-dropdown-position="bottom".

[areeb5]

this way is justing putting the dropdown elements below the control(md-autocomplete), but that list is very compact, hardly only 2items is showing as i have attached snapshot, kindly any one help me in this,
i have also applied css to body hard coded (height:auto !important;) but that also disturbing the scroll of application.

[Splaktar]

The window jumping to the top on selection has been fixed. Updated CodePen showing the fix in 1.1.7.

But the popup is still displaying on top, even when there is no room on the screen to display it. It also disables the window's scroll, so you can't scroll up without closing the popup. If a hard coded md-dropdown-position is not defined, it should choose the option which fits the popup the best.