Fixed #249 - Improve autocomplete css by using flex

primefaces · Apr 7, 2020 · 50a0890 · 50a0890
1 parent 9c9216b
commit 50a0890
Showing 1 changed file with 7 additions and 10 deletions.
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
@@ -431,24 +431,26 @@ export default {
 <style>
 .p-autocomplete {
     width: auto;
-    zoom: 1;
     cursor: pointer;
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
     position: relative;
-    display: inline-block;
+    display: -webkit-inline-flex;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
 }
 
 .p-autocomplete .p-autocomplete-dropdown {
-    height: 100%;
     width: 2em;
     margin-right: 0;
-    vertical-align: top;
 }
 
 .p-autocomplete .p-autocomplete-input {
-    padding-right: 1.5em;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
 }
 
 .p-autocomplete-loader {
@@ -584,11 +586,6 @@ export default {
     width: 100%;
 }
 
-.p-fluid .p-autocomplete.p-autocomplete-dd .p-autocomplete-input,
-.p-fluid .p-autocomplete.p-autocomplete-dd .p-autocomplete-multiple-container {
-    width: calc(100% - 2em);
-}
-
 .p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
     width: 2em;
 }