ske087/quality_app-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Add inline styles to barcode frames for correct positioning

Browse Source 
- 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
This commit is contained in:
Quality App Developer
2026-02-02 02:19:21 +02:00
parent 834bcc808a
commit 4784d1395c
1 changed files with 9 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/templates/modules/labels/print_module.html
View File

@@ -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;">