From 493bb276317aaf24df5d119525b8e10f055da16a Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 29 Apr 2020 15:18:38 +0300
Subject: [PATCH] Demo update

---
 src/views/listbox/ListboxDemo.vue | 20 ++++++++++++++++----
 src/views/listbox/ListboxDoc.vue  | 24 ++++++++++++++++++------
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/views/listbox/ListboxDemo.vue b/src/views/listbox/ListboxDemo.vue
index bdc077fb3..76b67a0ff 100755
--- a/src/views/listbox/ListboxDemo.vue
+++ b/src/views/listbox/ListboxDemo.vue
@@ -14,9 +14,9 @@
             <h3>Advanced with Templating, Filtering and Multiple Selection</h3>
             <Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
                 <template #option="slotProps">
-                    <div class="p-clearfix">
-                        <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
-                        <span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
+                    <div class="car-item">
+                        <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
+                        <span>{{slotProps.option.brand}}</span>
                     </div>
                 </template>
             </Listbox>
@@ -58,4 +58,16 @@ export default {
         'ListboxDoc': ListboxDoc
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+/deep/ .car-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    img {
+        width:32px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/listbox/ListboxDoc.vue b/src/views/listbox/ListboxDoc.vue
index f798602dd..0698b4594 100755
--- a/src/views/listbox/ListboxDoc.vue
+++ b/src/views/listbox/ListboxDoc.vue
@@ -42,9 +42,9 @@ data() {
 <template v-pre>
 &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
 	&lt;template #option="slotProps"&gt;
-		&lt;div class="p-clearfix"&gt;
-			&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt;
-			&lt;span style="float:right;margin:1.25em .5em 0 0"&gt;{{slotProps.option.brand}}&lt;/span&gt;
+		&lt;div&gt;
+			&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+			&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
 		&lt;/div&gt;
 	&lt;/template&gt;
 &lt;/Listbox&gt;
@@ -230,9 +230,9 @@ data() {
 &lt;h3&gt;Advanced with Templating, Filtering and Multiple Selection&lt;/h3&gt;
 &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
     &lt;template #option="slotProps"&gt;
-        &lt;div class="p-clearfix"&gt;
-            &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt;
-            &lt;span style="float:right;margin:1.25em .5em 0 0"&gt;{{slotProps.option.brand}}&lt;/span&gt;
+        &lt;div class="car-item"&gt;
+            &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+            &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/Listbox&gt;
@@ -266,6 +266,18 @@ export default {
 		}
 	}
 }
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+/deep/ .car-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    img {
+        width:32px;
+    }
+}
 </CodeHighlight>
 			</TabPanel>
 		</TabView>