From 4784d1395c933e49f05bcec7a7802cda7efaa2b0 Mon Sep 17 00:00:00 2001
From: Quality App Developer <dev@moto-adv.com>
Date: Mon, 2 Feb 2026 02:19:21 +0200
Subject: [PATCH] fix: Add inline styles to barcode frames for correct
 positioning

- Added inline styles to #barcode-frame div:
  * position: absolute; bottom: 10px; left: 11.34px
  * width: 227.4px; z-index: 5; text-align: center
- Added inline styles to #barcode-display SVG:
  * display: block; margin: 0 auto; height: 50px
- Added inline styles to #vertical-barcode-frame div:
  * position: absolute; right: 0; top: 65.7px
  * width: 32px; height: 321.3px; z-index: 5
  * display: flex; align-items: center; justify-content: center
- Added inline styles to #vertical-barcode-display SVG:
  * width: 100%; height: auto; transform: rotate(-90deg)
- Inline styles take precedence over CSS rules
- Ensures barcodes are positioned at bottom and right of label
---
 .../modules/labels/print_module.html          | 43 ++++---------------
 1 file changed, 9 insertions(+), 34 deletions(-)

diff --git a/app/templates/modules/labels/print_module.html b/app/templates/modules/labels/print_module.html
index 1a5f371..00e53c7 100644
--- a/app/templates/modules/labels/print_module.html
+++ b/app/templates/modules/labels/print_module.html
@@ -103,40 +103,15 @@
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     } #}
 
-    /* Barcode Styling */
+    /* Barcode Styling - inline styles take precedence, CSS here for reference */
+    /* Horizontal barcode at bottom of label */
     #barcode-frame {
-        position: absolute;
-        bottom: 10px;
-        left: 11.34px;
-        right: 11.34px;
-        width: 227.4px;
-        z-index: 5;
-        text-align: center;
-    }
-
-    #barcode-frame svg {
-        display: block;
-        margin: 0 auto;
-        height: 50px;
+        /* position: absolute; bottom: 10px; left: 11.34px; width: 227.4px; z-index: 5; text-align: center; */
     }
 
+    /* Vertical barcode on right side of label */
     #vertical-barcode-frame {
-        position: absolute;
-        right: 0;
-        top: 65.7px;
-        width: 32px;
-        height: 321.3px;
-        z-index: 5;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    #vertical-barcode-frame svg {
-        width: 100%;
-        height: auto;
-        transform: rotate(-90deg);
-        transform-origin: center;
+        /* position: absolute; right: 0; top: 65.7px; width: 32px; height: 321.3px; z-index: 5; */
     }
 </style>
 {% endblock %}
@@ -254,9 +229,9 @@
             </div>
             
             <!-- Barcode Frame - positioned 10px below rectangle, centered, constrained to label width -->
-            <div id="barcode-frame">
+            <div id="barcode-frame" style="position: absolute; bottom: 10px; left: 11.34px; width: 227.4px; z-index: 5; text-align: center;">
                 <!-- Code 128 Barcode representation -->
-                <svg id="barcode-display"></svg>
+                <svg id="barcode-display" style="display: block; margin: 0 auto; height: 50px;"></svg>
                 
                 <!-- Barcode text below the bars (hidden in preview) -->
                 <div id="barcode-text" style="font-size: 8px; font-family: 'Courier New', monospace; margin-top: 2px; text-align: center; font-weight: bold; display: none;">
@@ -265,9 +240,9 @@
             </div>
             
             <!-- Vertical Barcode Frame - positioned on the right side, rotated 90 degrees, spans the height of main rectangle -->
-            <div id="vertical-barcode-frame">
+            <div id="vertical-barcode-frame" style="position: absolute; right: 0; top: 65.7px; width: 32px; height: 321.3px; z-index: 5; display: flex; align-items: center; justify-content: center;">
                 <!-- Vertical Code 128 Barcode representation -->
-                <svg id="vertical-barcode-display"></svg>
+                <svg id="vertical-barcode-display" style="width: 100%; height: auto; transform: rotate(-90deg); transform-origin: center;"></svg>
                 
                 <!-- Vertical barcode text (hidden in preview) -->
                 <div id="vertical-barcode-text" style="position: absolute; bottom: -15px; font-size: 7px; font-family: 'Courier New', monospace; text-align: center; font-weight: bold; width: 100%; display: none;">