fix(autocomplete): prevents text from going under the clear button

Closes #2193 Closes #2578
angular · May 30, 2015 · 73e03a7 · 73e03a7 · tianvan · May 30, 2015
1 parent a7dcfb6
commit 73e03a7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 12 deletions.
diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss
@@ -59,7 +59,6 @@ md-autocomplete {
     position: relative;
     overflow: visible;
     height: 40px;
-
     md-progress-linear {
       position: absolute;
       bottom: 0; left: 0; width: 100%;
@@ -86,9 +85,6 @@ md-autocomplete {
     }
   }
   input:not(.md-input) {
-    position: absolute;
-    left: 0;
-    top: 0;
     width: 100%;
     box-sizing: border-box;
     border: none;
@@ -104,13 +100,10 @@ md-autocomplete {
     }
   }
   button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
+    position: relative;
     line-height: 20px;
     text-align: center;
-    width: 20px;
-    height: 20px;
+    width: 40px;
     cursor: pointer;
     border: none;
     border-radius: 50%;

diff --git a/src/components/autocomplete/js/autocompleteDirective.js b/src/components/autocomplete/js/autocompleteDirective.js
@@ -89,7 +89,10 @@ function MdAutocomplete ($mdTheming, $mdUtil) {
     },
     template: function (element, attr) {
       return '\
-        <md-autocomplete-wrap ng-class="{ \'md-whiteframe-z1\': !floatingLabel }" role="listbox">\
+        <md-autocomplete-wrap\
+            layout="row"\
+            ng-class="{ \'md-whiteframe-z1\': !floatingLabel }"\
+            role="listbox">\
           ' + getInputElement() + '\
           <button\
               type="button"\
@@ -145,7 +148,7 @@ function MdAutocomplete ($mdTheming, $mdUtil) {
       function getInputElement() {
         if (attr.mdFloatingLabel) {
           return '\
-            <md-input-container ng-if="floatingLabel">\
+            <md-input-container flex ng-if="floatingLabel">\
               <label>{{floatingLabel}}</label>\
               <input type="search"\
                   id="fl-input-{{$mdAutocompleteCtrl.id}}"\
@@ -165,7 +168,7 @@ function MdAutocomplete ($mdTheming, $mdUtil) {
             </md-input-container>';
         } else {
           return '\
-            <input type="search"\
+            <input flex type="search"\
                 id="input-{{$mdAutocompleteCtrl.id}}"\
                 name="{{name}}"\
                 ng-if="!floatingLabel"\