Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(autocomplete): adjusts dropdown position for standard input style
Browse files Browse the repository at this point in the history
Closes #5558
  • Loading branch information
Robert Messerle committed Nov 11, 2015
1 parent 125bfe6 commit 2654c5d
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 6 deletions.
8 changes: 7 additions & 1 deletion src/components/autocomplete/autocomplete.scss
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,13 @@ md-autocomplete {
position: absolute;
bottom: -2px;
left: 0;

// When `md-inline` is present, we adjust the offset to go over the `ng-message` space
&.md-inline {
bottom: 40px;
right: 2px;
left: 2px;
width: auto;
}
.md-mode-indeterminate {
position: absolute;
top: 0;
Expand Down
17 changes: 12 additions & 5 deletions src/components/autocomplete/js/autocompleteController.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,11 +84,18 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
left = hrect.left - root.left,
width = hrect.width,
offset = getVerticalOffset(),
styles = {
left: left + 'px',
minWidth: width + 'px',
maxWidth: Math.max(hrect.right - root.left, root.right - hrect.left) - MENU_PADDING + 'px'
};
styles;
// If using `md-input-container` layout, push dropdown up to cover `ng-messages` area
if ($attrs.mdFloatingLabel) {
left += 2;
top -= 18;
width -= 4;
}
styles = {
left: left + 'px',
minWidth: width + 'px',
maxWidth: Math.max(hrect.right - root.left, root.right - hrect.left) - MENU_PADDING + 'px'
};
if (top > bot && root.height - hrect.bottom - MENU_PADDING < MAX_HEIGHT) {
styles.top = 'auto';
styles.bottom = bot + 'px';
Expand Down
1 change: 1 addition & 0 deletions src/components/autocomplete/js/autocompleteDirective.js
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,7 @@ function MdAutocomplete () {
role="listbox">\
' + getInputElement() + '\
<md-progress-linear\
class="' + (attr.mdFloatingLabel ? 'md-inline' : '') + '"\
ng-if="$mdAutocompleteCtrl.loadingIsVisible()"\
md-mode="indeterminate"></md-progress-linear>\
<md-virtual-repeat-container\
Expand Down

0 comments on commit 2654c5d

Please sign in to comment.