diff --git a/doc/picklist/TemplateDoc.vue b/doc/picklist/TemplateDoc.vue
index 35f335753..f9af4dc42 100644
--- a/doc/picklist/TemplateDoc.vue
+++ b/doc/picklist/TemplateDoc.vue
@@ -5,7 +5,7 @@
     <div class="card">
         <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
             <template #item="{ item }">
-                <div class="flex flex-wrap p-1 items-center gap-4">
+                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
                     <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
@@ -33,7 +33,7 @@ export default {
                 basic: `
 <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
     <template #item="{ item }">
-        <div class="flex flex-wrap p-1 items-center gap-4">
+        <div class="flex flex-wrap p-1 items-center gap-4 w-full">
             <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
             <div class="flex-1 flex flex-col gap-1">
                 <span class="font-medium">{{ item.name }}</span>
@@ -52,7 +52,7 @@ export default {
     <div class="card">
         <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
             <template #item="{ item }">
-                <div class="flex flex-wrap p-1 items-center gap-4">
+                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
                     <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>