+
{{slotProps.option.brand}}
@@ -70,14 +70,16 @@ export default {
}
.p-dropdown-car-option {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
img {
- vertical-align: middle;
margin-right: .5em;
width: 24px;
}
span {
- float: right;
margin-top: .125em;
}
}
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index f5f44e7ed..8706d7d93 100644
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -44,7 +44,7 @@ data() {
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
<template #option="slotProps">
- <div class="p-clearfix p-dropdown-car-option">
+ <div class="p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
@@ -254,7 +254,7 @@ data() {
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
<template #option="slotProps">
- <div class="p-clearfix p-dropdown-car-option">
+ <div class="p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
@@ -299,16 +299,18 @@ export default {
}
.p-dropdown-car-option {
- img {
- vertical-align: middle;
- margin-right: .5em;
- width: 24px;
- }
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
- span {
- float: right;
- margin-top: .125em;
- }
+ img {
+ margin-right: .5em;
+ width: 24px;
+ }
+
+ span {
+ margin-top: .125em;
+ }
}