Good afternoon all,
today i implemented the datatables to my bootstrap site and it seems to work nicely,
but the only thing is that the layout is not correct anymore.
In our 'live' environment we have our table that we want to sort/search inside a tab-pane (Div class),
when we apply the datatables in our 'dev' environment this table gets replaced by a wrapper and some more divs.
We have a nice 12 column layout, with columns filled to those specs, col-1, col-4, col-2, col-5.
The last column gets dropped to the next line in our Dev environment.
I know this can happen in bootstrap if you have to much info on your line, or wrong column assignment.
So i went digging a little bit, and it seems that the width's of my column's in dev are bigger then in live (after applying datatables).
Live;
col1 - 92,33 | col4 - 369,33 | col2 - 184,66 | col5 - 461,66
Total: ~1.108
Dev:
col1 - 117,13 | col4 - 394,13 | col2 - 209,45 | col5 - 486,45
Total: ~1.207
running down the code, reducing some padding etc, it still didn't seems to work.
When using the Chrome Inspection tool,
it reveals that the live (col-1) version has a left padding of 4.8, a center of 82.73 and a right padding of 4,8 (totaling 92,33)
on the dev site, col-1 has a left padding of 4.8, a center of 92,33 and a right padding of 20. (totaling 117,13)
As you can see the 'center' part of the column seems to be the same size as the whole column including padding from the live site.
The right padding is a datatables css setting, the rest seems inherited from bootstrap itself.
is there something i'm missing or doing wrong?
Using Bootstrap v4.4.1 (as from css)
Jscript v3.4.1 (locally hosted)
and the JS and CSS (locally hosted) from this url: https://datatables.net/examples/styling/bootstrap4.html
if some things are not clear, just ask me 