diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss index 802b915ff43..1e3ab895ee0 100644 --- a/src/components/autocomplete/autocomplete.scss +++ b/src/components/autocomplete/autocomplete.scss @@ -170,9 +170,6 @@ md-autocomplete { } .md-autocomplete-suggestions { position: absolute; - top: 100%; - left: 0; - right: 0; box-shadow: 0 2px 5px rgba(black, 0.25); margin: 0; list-style: none; @@ -190,6 +187,8 @@ md-autocomplete { transition: background 0.15s linear; cursor: pointer; margin: 0; + white-space: nowrap; + text-overflow: ellipsis; &.ng-enter, &.ng-hide-remove { transition: none; diff --git a/src/components/autocomplete/js/autocompleteController.js b/src/components/autocomplete/js/autocompleteController.js index 3b9a0fbe16e..26dfb2695cc 100644 --- a/src/components/autocomplete/js/autocompleteController.js +++ b/src/components/autocomplete/js/autocompleteController.js @@ -71,7 +71,12 @@ bot = root.height - vrect.top, left = hrect.left - root.left, width = hrect.width, - styles = { left: left + 'px', width: width + 'px' }; + styles = { + left: left + 'px', + minWidth: width + 'px', + maxWidth: Math.max(hrect.right - root.left, root.right - hrect.left) - MENU_PADDING + 'px', + opacity: 0 + }; if (top > bot && root.height - hrect.bottom - MENU_PADDING < MAX_HEIGHT) { styles.top = 'auto'; styles.bottom = bot + 'px'; @@ -81,7 +86,17 @@ styles.bottom = 'auto'; styles.maxHeight = Math.min(MAX_HEIGHT, root.height - hrect.bottom - MENU_PADDING) + 'px'; } + $timeout(correctHorizontalAlignment, 0, false); elements.$.ul.css(styles); + + function correctHorizontalAlignment () { + var dropdown = elements.ul.getBoundingClientRect(), + styles = { opacity: 1 }; + if (dropdown.right > root.right - MENU_PADDING) { + styles.left = (hrect.right - dropdown.width) + 'px'; + } + elements.$.ul.css(styles); + } } function moveDropdown () {