Getting a "short" barcode using only CSS `height`; disabling the inline `transform: translate(0,0)`
- Dominant language
- JavaScript
- Stars
- 5.9k
- Forks
- 1.1k
- PR merge metrics
- No merged PRs in 30d
Description
Hi everyone,
Thank you for a great lib!
I want to have a "short" barcode as shown here: https://github.com/lindell/JsBarcode/wiki/Options#height
The above example accomplishes this using the `height` option, but I need to style it using CSS only. When I set the height CSS property for my barcode `svg` element, the barcode shrinks its width proportionally, and as a result I'm getting an overall smaller barcode, while I need a barcode that's still wide.
Please see my final `svg` element below. It somehow gets the width and height hardcoded into it in `px`.
```
```
My full CSS code for that `svg` is:
```
.label svg {
height: 30mm;
transform: rotate(270deg) !important; /*have to override the inline transform*/
transform-origin: 100% 0;
margin-left: -150mm;
width: 150mm;
}
```
(As a side note, curious if there is a way to turn off the inline `transform: translate(0,0)` so that I can stop using `!important` in my CSS file.)
Contributor guide
Research direction
Start by tracing how the library generates the SVG element shown in the issue, focusing on the hardcoded width, height, viewBox, and inline transform. Check whether the existing barcode options or SVG-generation entry point can support CSS-only sizing and disabling that transform; done means the barcode remains wide at the requested CSS height and can be rotated without !important.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100