From 639a51cdea30d97bd30862d3b7e12c77512536b0 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 2 May 2020 11:41:42 +0300
Subject: [PATCH] Update autocomplete demo

---
 src/views/autocomplete/AutoCompleteDemo.vue | 16 ++++++----------
 src/views/autocomplete/AutoCompleteDoc.vue  | 18 +++++++-----------
 2 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/src/views/autocomplete/AutoCompleteDemo.vue b/src/views/autocomplete/AutoCompleteDemo.vue
index 4224acee5..40139086e 100755
--- a/src/views/autocomplete/AutoCompleteDemo.vue
+++ b/src/views/autocomplete/AutoCompleteDemo.vue
@@ -15,7 +15,7 @@
             <h3>Dropdown and Templating</h3>
             <AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Search car brands" :dropdown="true">
                 <template #item="slotProps">
-                    <div class="p-clearfix p-autocomplete-brand-item">
+                    <div class="p-autocomplete-brand-item">
                         <img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
                         <div>{{slotProps.item}}</div>
                     </div>
@@ -102,16 +102,12 @@ export default {
 
 <style lang="scss">
 .p-autocomplete-brand-item {
-    img {
-        width: 32px;
-        display: inline-block;
-        margin: 5px 0 2px 5px;
-    }
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-    div {
-        font-size: 16px;
-        float: right;
-        margin: 10px 10px 0 0;
+    img {
+        width: 28px;
     }
 }
 </style>
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index 5678a3959..29c3ab2ea 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -261,7 +261,7 @@ export default {
 &lt;h3&gt;Dropdown and Templating&lt;/h3&gt;
 &lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
     &lt;template #item="slotProps"&gt;
-        &lt;div class="p-clearfix p-autocomplete-brand-item"&gt;
+        &lt;div class="p-autocomplete-brand-item"&gt;
             &lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
             &lt;div&gt;{{slotProps.item}}&lt;/div&gt;
         &lt;/div&gt;
@@ -341,17 +341,13 @@ export default {
 
 <CodeHighlight lang="css">
 .p-autocomplete-brand-item {
-	img {
-		width: 32px;
-		display: inline-block;
-		margin: 5px 0 2px 5px;
-	}
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-	div {
-		font-size: 16px;
-		float: right;
-		margin: 10px 10px 0 0;
-	}
+    img {
+        width: 28px;
+    }
 }
 </CodeHighlight>
 			</TabPanel>