feat(autocomplete): dropdown will now stretch to accomodate longer text

Size logic is smart enough to find the maximum possible size based on either left or right horizontal snapping.  If the content is larger than this, it will use an ellipsis overflow by default.

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;

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 () {