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

Commit 44d1636

Browse files
Robert MesserleThomasBurleson
Robert Messerle
authored andcommitted
fix(autocomplete): adjusts dropdown position for standard input style
Fixes #5558. Closes #5680.
1 parent 2eb1bc1 commit 44d1636

File tree

3 files changed

+25
-9
lines changed

3 files changed

+25
-9
lines changed

src/components/autocomplete/autocomplete.scss

+7-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,13 @@ md-autocomplete {
8484
position: absolute;
8585
bottom: -2px;
8686
left: 0;
87-
87+
// When `md-inline` is present, we adjust the offset to go over the `ng-message` space
88+
&.md-inline {
89+
bottom: 40px;
90+
right: 2px;
91+
left: 2px;
92+
width: auto;
93+
}
8894
.md-mode-indeterminate {
8995
position: absolute;
9096
top: 0;

src/components/autocomplete/js/autocompleteController.js

+17-8
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ angular
22
.module('material.components.autocomplete')
33
.controller('MdAutocompleteCtrl', MdAutocompleteCtrl);
44

5-
var ITEM_HEIGHT = 41,
6-
MAX_HEIGHT = 5.5 * ITEM_HEIGHT,
7-
MENU_PADDING = 8;
5+
var ITEM_HEIGHT = 41,
6+
MAX_HEIGHT = 5.5 * ITEM_HEIGHT,
7+
MENU_PADDING = 8,
8+
INPUT_PADDING = 2; // Padding provided by `md-input-container`
89

910
function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming, $window,
1011
$animate, $rootElement, $attrs, $q) {
@@ -84,11 +85,17 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
8485
left = hrect.left - root.left,
8586
width = hrect.width,
8687
offset = getVerticalOffset(),
87-
styles = {
88-
left: left + 'px',
89-
minWidth: width + 'px',
90-
maxWidth: Math.max(hrect.right - root.left, root.right - hrect.left) - MENU_PADDING + 'px'
91-
};
88+
styles;
89+
// Adjust the width to account for the padding provided by `md-input-container`
90+
if ($attrs.mdFloatingLabel) {
91+
left += INPUT_PADDING;
92+
width -= INPUT_PADDING * 2;
93+
}
94+
styles = {
95+
left: left + 'px',
96+
minWidth: width + 'px',
97+
maxWidth: Math.max(hrect.right - root.left, root.right - hrect.left) - MENU_PADDING + 'px'
98+
};
9299
if (top > bot && root.height - hrect.bottom - MENU_PADDING < MAX_HEIGHT) {
93100
styles.top = 'auto';
94101
styles.bottom = bot + 'px';
@@ -114,6 +121,8 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
114121
offset = inputContainer.prop('offsetHeight');
115122
offset -= input.prop('offsetTop');
116123
offset -= input.prop('offsetHeight');
124+
// add in the height left up top for the floating label text
125+
offset += inputContainer.prop('offsetTop');
117126
}
118127
return offset;
119128
}

src/components/autocomplete/js/autocompleteDirective.js

+1
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,7 @@ function MdAutocomplete () {
167167
role="listbox">\
168168
' + getInputElement() + '\
169169
<md-progress-linear\
170+
class="' + (attr.mdFloatingLabel ? 'md-inline' : '') + '"\
170171
ng-if="$mdAutocompleteCtrl.loadingIsVisible()"\
171172
md-mode="indeterminate"></md-progress-linear>\
172173
<md-virtual-repeat-container\

0 commit comments

Comments
 (0)