From 22d7402e18a40f77b2d9344fe3cff0cc1daccd3c Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 15 Jan 2024 17:08:03 +0300
Subject: [PATCH] Fixed #5089 - Float label demo is broken in mobile mode

---
 doc/dropdown/FloatLabelDoc.vue    | 16 ++++++++--------
 doc/multiselect/FloatLabelDoc.vue | 16 ++++++++--------
 doc/treeselect/FloatLabelDoc.vue  | 16 ++++++++--------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/doc/dropdown/FloatLabelDoc.vue b/doc/dropdown/FloatLabelDoc.vue
index acdc07c08..0f96551d6 100644
--- a/doc/dropdown/FloatLabelDoc.vue
+++ b/doc/dropdown/FloatLabelDoc.vue
@@ -3,8 +3,8 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <div class="p-float-label">
-            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+        <div class="p-float-label w-full md:w-14rem">
+            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
         </div>
     </div>
@@ -25,16 +25,16 @@ export default {
             ],
             code: {
                 basic: `
-<div class="p-float-label">
-    <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+<div class="p-float-label w-full md:w-14rem">
+    <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
     <label for="dd-city">Select a City</label>
 </div>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <div class="p-float-label">
-            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+        <div class="p-float-label w-full md:w-14rem">
+            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
         </div>
     </div>
@@ -60,8 +60,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <div class="p-float-label">
-            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+        <div class="p-float-label w-full md:w-14rem">
+            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
         </div>
     </div>
diff --git a/doc/multiselect/FloatLabelDoc.vue b/doc/multiselect/FloatLabelDoc.vue
index 7b52c6b58..4a181ce18 100644
--- a/doc/multiselect/FloatLabelDoc.vue
+++ b/doc/multiselect/FloatLabelDoc.vue
@@ -3,8 +3,8 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
-            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+        <span class="p-float-label w-full md:w-20rem">
+            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
         </span>
     </div>
@@ -25,16 +25,16 @@ export default {
             ],
             code: {
                 basic: `
-<span class="p-float-label">
-    <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+<span class="p-float-label w-full md:w-20rem">
+    <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
     <label for="ms-cities">MultiSelect</label>
 </span>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
-            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+        <span class="p-float-label w-full md:w-20rem">
+            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
         </span>
     </div>
@@ -60,8 +60,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
-            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+        <span class="p-float-label w-full md:w-20rem">
+            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
         </span>
     </div>
diff --git a/doc/treeselect/FloatLabelDoc.vue b/doc/treeselect/FloatLabelDoc.vue
index 5b96eecb2..dbd1c72fa 100644
--- a/doc/treeselect/FloatLabelDoc.vue
+++ b/doc/treeselect/FloatLabelDoc.vue
@@ -3,8 +3,8 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
-            <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
+        <span class="p-float-label w-full md:w-20rem">
+            <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
             <label>Tree Select</label>
         </span>
     </div>
@@ -21,16 +21,16 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<span class="p-float-label">
-    <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
+<span class="p-float-label w-full md:w-20rem">
+    <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
     <label>Tree Select</label>
 </span>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
-            <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
+        <span class="p-float-label w-full md:w-20rem">
+            <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
             <label>Tree Select</label>
         </span>
     </div>
@@ -55,8 +55,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
-            <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
+        <span class="p-float-label w-full md:w-20rem">
+            <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
             <label>Tree Select</label>
         </span>
     </div>