From c06c73e28584e2650cc55340db60202d39e9daed Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 12 Jan 2024 15:44:53 +0300
Subject: [PATCH] Update TemplatingDoc.vue

---
 doc/metergroup/TemplatingDoc.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/doc/metergroup/TemplatingDoc.vue b/doc/metergroup/TemplatingDoc.vue
index da645c86a..1c27f7a7c 100644
--- a/doc/metergroup/TemplatingDoc.vue
+++ b/doc/metergroup/TemplatingDoc.vue
@@ -20,7 +20,7 @@
             <template #start="{ totalPercent }">
                 <div class="flex justify-content-between mt-3 mb-2">
                     <span>Account </span>
-                    <span :style="{ 'margin-left': totalPercent }" class="absolute">{{ totalPercent }}</span>
+                    <span :style="{ width: totalPercent }" class="absolute text-right">{{ totalPercent }}</span>
                     <span>Savings: 1000$ </span>
                 </div>
             </template>
@@ -52,8 +52,9 @@ export default {
         </div>
     </template>
     <template #start="{ totalPercent }">
-        <div class="flex mt-3 mb-2 justify-content-between">
-            <span>Total spent: {{ totalPercent }}</span>
+        <div class="flex justify-content-between mt-3 mb-2">
+            <span>Account </span>
+            <span :style="{ width: totalPercent }" class="absolute text-right">{{ totalPercent }}</span>
             <span>Savings: 1000$ </span>
         </div>
     </template>
@@ -74,8 +75,9 @@ export default {
                 </div>
             </template>
             <template #start="{ totalPercent }">
-                <div class="flex mt-3 mb-2 justify-content-between">
-                    <span>Total spent: {{ totalPercent }}</span>
+                <div class="flex justify-content-between mt-3 mb-2">
+                    <span>Account </span>
+                    <span :style="{ width: totalPercent }" class="absolute text-right">{{ totalPercent }}</span>
                     <span>Savings: 1000$ </span>
                 </div>
             </template>
@@ -112,8 +114,9 @@ export default {
                 </div>
             </template>
             <template #start="{ totalPercent }">
-                <div class="flex mt-3 mb-2 justify-content-between">
-                    <span>Total spent: {{ totalPercent }}</span>
+                <div class="flex justify-content-between mt-3 mb-2">
+                    <span>Account </span>
+                    <span :style="{ width: totalPercent }" class="absolute text-right">{{ totalPercent }}</span>
                     <span>Savings: 1000$ </span>
                 </div>
             </template>