2
2
. module ( 'material.components.autocomplete' )
3
3
. controller ( 'MdAutocompleteCtrl' , MdAutocompleteCtrl ) ;
4
4
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`
8
9
9
10
function MdAutocompleteCtrl ( $scope , $element , $mdUtil , $mdConstant , $mdTheming , $window ,
10
11
$animate , $rootElement , $attrs , $q ) {
@@ -84,11 +85,17 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
84
85
left = hrect . left - root . left ,
85
86
width = hrect . width ,
86
87
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
+ } ;
92
99
if ( top > bot && root . height - hrect . bottom - MENU_PADDING < MAX_HEIGHT ) {
93
100
styles . top = 'auto' ;
94
101
styles . bottom = bot + 'px' ;
@@ -114,6 +121,8 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
114
121
offset = inputContainer . prop ( 'offsetHeight' ) ;
115
122
offset -= input . prop ( 'offsetTop' ) ;
116
123
offset -= input . prop ( 'offsetHeight' ) ;
124
+ // add in the height left up top for the floating label text
125
+ offset += inputContainer . prop ( 'offsetTop' ) ;
117
126
}
118
127
return offset ;
119
128
}
0 commit comments