From 926b08506023cddc23674aa8c1b400dbb9291741 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 18 Mar 2024 13:29:19 +0300
Subject: [PATCH] Refactor #5437 - SpeedDial

---
 .../themes/primeone/base/speeddial/index.js   |   2 +-
 doc/speeddial/CircleDoc.vue                   |  14 +-
 doc/speeddial/CustomDoc.vue                   | 161 +++++++++---------
 doc/speeddial/LinearDoc.vue                   |  32 ++--
 doc/speeddial/MaskDoc.vue                     |   8 +-
 doc/speeddial/QuarterCircleDoc.vue            |  32 ++--
 doc/speeddial/SemiCircleDoc.vue               |  32 ++--
 doc/speeddial/TooltipDoc.vue                  |  16 +-
 8 files changed, 148 insertions(+), 149 deletions(-)

diff --git a/components/lib/themes/primeone/base/speeddial/index.js b/components/lib/themes/primeone/base/speeddial/index.js
index d3be6bd34..35df53e49 100644
--- a/components/lib/themes/primeone/base/speeddial/index.js
+++ b/components/lib/themes/primeone/base/speeddial/index.js
@@ -1,7 +1,7 @@
 export default {
     css: ({ dt }) => `
 .p-speeddial {
-    position: absolute;
+    position: static;
     display: flex;
     gap: 0.25rem;
 }
diff --git a/doc/speeddial/CircleDoc.vue b/doc/speeddial/CircleDoc.vue
index 3ae3bbcb2..e0ca2ee42 100644
--- a/doc/speeddial/CircleDoc.vue
+++ b/doc/speeddial/CircleDoc.vue
@@ -3,8 +3,8 @@
         <p>Items can be displayed around the button when <i>type</i> is set to <i>circle</i>. Additional <i>radius</i> property defines the radius of the circle.</p>
     </DocSectionText>
     <div class="card">
-        <div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
-            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
+        <div :style="{ position: 'relative', height: '500px' }" class="flex align-items-center justify-content-center">
+            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" :style="{ position: 'absolute' }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -53,13 +53,13 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
+<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" :style="{ position: 'absolute' }" />
 `,
                 options: `
 <template>
     <div class="card">
-        <div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
-            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
+        <div :style="{ position: 'relative', height: '500px' }" class="flex align-items-center justify-content-center">
+            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" :style="{ position: 'absolute' }" />
             <Toast />
         </div>
     </div>
@@ -114,8 +114,8 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
-            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
+        <div :style="{ position: 'relative', height: '500px' }" class="flex align-items-center justify-content-center">
+            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" :style="{ position: 'absolute' }" />
             <Toast />
         </div>
     </div>
diff --git a/doc/speeddial/CustomDoc.vue b/doc/speeddial/CustomDoc.vue
index 80cd4b575..0502de748 100644
--- a/doc/speeddial/CustomDoc.vue
+++ b/doc/speeddial/CustomDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card">
         <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
+            <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -53,62 +53,61 @@ export default {
             ],
             code: {
                 basic: `
-<Toast />
-<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
+<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
             <Toast />
-            <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
+            <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
         </div>
     </div>
 </template>
 
 <script>
 export default {
-  data() {
-      return {
-          items: [
-              {
-                  label: 'Add',
-                  icon: 'pi pi-pencil',
-                  command: () => {
-                      this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
-                  }
-              },
-              {
-                  label: 'Update',
-                  icon: 'pi pi-refresh',
-                  command: () => {
-                      this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
-                  }
-              },
-              {
-                  label: 'Delete',
-                  icon: 'pi pi-trash',
-                  command: () => {
-                      this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
-                  }
-              },
-              {
-                  label: 'Upload',
-                  icon: 'pi pi-upload',
-                  command: () => {
-                      this.$router.push('/fileupload');
-                  }
-              },
-              {
-                  label: 'Vue Website',
-                  icon: 'pi pi-external-link',
-                  command: () => {
-                      window.location.href = 'https://vuejs.org/';
-                  }
-              }
-          ]
-      }
-  }
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        }
+    }
 };
 <\/script>
 `,
@@ -117,7 +116,7 @@ export default {
     <div class="card">
         <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
             <Toast />
-            <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
+            <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
         </div>
     </div>
 </template>
@@ -131,41 +130,41 @@ const toast = useToast();
 const router = useRouter();
 
 const items = ref([
-  {
-      label: 'Add',
-      icon: 'pi pi-pencil',
-      command: () => {
-          toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
-      }
-  },
-  {
-      label: 'Update',
-      icon: 'pi pi-refresh',
-      command: () => {
-          toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
-      }
-  },
-  {
-      label: 'Delete',
-      icon: 'pi pi-trash',
-      command: () => {
-          toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
-      }
-  },
-  {
-      label: 'Upload',
-      icon: 'pi pi-upload',
-      command: () => {
-          router.push('/fileupload');
-      }
-  },
-  {
-      label: 'Vue Website',
-      icon: 'pi pi-external-link',
-      command: () => {
-          window.location.href = 'https://vuejs.org/'
-      }
-  }
+    {
+        label: 'Add',
+        icon: 'pi pi-pencil',
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+        }
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash',
+        command: () => {
+            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+        }
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-upload',
+        command: () => {
+            router.push('/fileupload');
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/'
+        }
+    }
 ])
 <\/script>
 `
diff --git a/doc/speeddial/LinearDoc.vue b/doc/speeddial/LinearDoc.vue
index 2f4e6f691..d92b7dfe6 100644
--- a/doc/speeddial/LinearDoc.vue
+++ b/doc/speeddial/LinearDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
-            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+            <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+            <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -56,19 +56,19 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
-<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-<SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-<SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+<SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+<SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+<SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
-            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+            <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+            <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
             <Toast />
         </div>
     </div>
@@ -124,10 +124,10 @@ export default {
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
-            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+            <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+            <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
             <Toast />
         </div>
     </div>
diff --git a/doc/speeddial/MaskDoc.vue b/doc/speeddial/MaskDoc.vue
index f0106944f..84019bc20 100644
--- a/doc/speeddial/MaskDoc.vue
+++ b/doc/speeddial/MaskDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card p-3">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
+            <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -53,13 +53,13 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
+<SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
 `,
                 options: `
 <template>
     <div class="card p-3">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
+            <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
         </div>
     </div>
 </template>
@@ -114,7 +114,7 @@ data() {
 <template>
     <div class="card p-3">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
+            <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
         </div>
     </div>
 </template>
diff --git a/doc/speeddial/QuarterCircleDoc.vue b/doc/speeddial/QuarterCircleDoc.vue
index 39456cdf8..6e43e500c 100644
--- a/doc/speeddial/QuarterCircleDoc.vue
+++ b/doc/speeddial/QuarterCircleDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -56,19 +56,19 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" />
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" />
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" />
+<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
+<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
+<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
             <Toast />
         </div>
     </div>
@@ -124,10 +124,10 @@ data() {
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" />
-            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
+            <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
             <Toast />
         </div>
     </div>
diff --git a/doc/speeddial/SemiCircleDoc.vue b/doc/speeddial/SemiCircleDoc.vue
index bb2587bc1..273c34741 100644
--- a/doc/speeddial/SemiCircleDoc.vue
+++ b/doc/speeddial/SemiCircleDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -56,19 +56,19 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+            <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
             <Toast />
         </div>
     </div>
@@ -123,10 +123,10 @@ export default {
                 composition: `
 <template>
     <div class="card" :style="{ position: 'relative', height: '500px' }">
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
         <Toast />
     </div>
 </template>
diff --git a/doc/speeddial/TooltipDoc.vue b/doc/speeddial/TooltipDoc.vue
index 8747d1fde..24f91795a 100644
--- a/doc/speeddial/TooltipDoc.vue
+++ b/doc/speeddial/TooltipDoc.vue
@@ -4,8 +4,8 @@
     </DocSectionText>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
+            <SpeedDial :model="items" direction="up" class="right-0 bottom-0 absolute" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" class="left-0 bottom-0 absolute" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -54,15 +54,15 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
-<SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
+<SpeedDial :model="items" direction="up" class="right-0 bottom-0 absolute" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
+<SpeedDial :model="items" direction="up" class="left-0 bottom-0 absolute" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
+            <SpeedDial :model="items" direction="up" class="right-0 bottom-0 absolute" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" class="left-0 bottom-0 absolute" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
             <Toast />
         </div>
     </div>
@@ -118,8 +118,8 @@ export default {
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
+            <SpeedDial :model="items" direction="up" class="right-0 bottom-0 absolute" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" class="left-0 bottom-0 absolute" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
             <Toast />
         </div>
     </div>