Column width problem with a SVG in cells
Column width problem with a SVG in cells
slolo
Posts: 75Questions: 15Answers: 1
Link to test case: https://live.datatables.net/gucaruco/1/edit
Debugger code (debug.datatables.net): NA
Error messages shown: NA
Description of problem: Hello,
I have a simple example (see test case).
When I create the datatable with an SVG in a column, it takes the entire available width instead of automatically sizing itself ("autoWidth": true)
My example use the component JsBarcode: (see https://github.com/lindell/JsBarcode)
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js" crossorigin="anonymous"></script>
And this is the way to create the barcode:
<td data-sort="1234567890128" data-search="1234567890128" data-filter="1234567890128">
<svg class="barcode" jsbarcode-format="ean13" jsbarcode-value="1234567890128"></svg>
</td>
Do you have any idea why the column is taking up all the available width?
For your information, I did not have this behavior with v1.13.10 of the DataTables component.
Thanks in advance for your help and have a nice day.
This question has an accepted answers - jump to answer
Answers
Hi,
Add:
to your CSS: https://live.datatables.net/gucaruco/2/edit .
Why? What is happening is that when DataTables creates its "sizing" table the SVG element is inserted, but nor rendered by JsBarcode, so it takes the default dimensions for SVG elements - 300px x 150px (at least those are the sizes in Firefox).
The column widths are actually correct for that 300px width and DataTables applies that to the main table. When JsBarcode then renders and reduces the width it looks rubbish as you were seeing. Setting the SVG default width to what it ends up being rendered as resolves the issue.
The fact that 1.x showed the widths differently actually highlights a flaw in its approach (even if it is a little bit more desirable in this case!!).
Great looking table btw - really like the barcodes in it!
Allan
Hi @allan,
Thanks a lot for the tips, it works like a charm