DataTables download builder - Bootstrap
DataTables download builder - Bootstrap
![Balkoth](https://secure.gravatar.com/avatar/f055c5591bf33d253d621e4f16220e09/?default=https%3A%2F%2Fvanillicon.com%2Ff055c5591bf33d253d621e4f16220e09_200.png&rating=g&size=120)
Hi,
there is a problem with how the download builder merges files:
- Styling Framework: Bootstrap 4
- Packages: Bootstrap 4, DataTables
- Download: Minify, Concatenate
The downloadbuilder advises to use: <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
This file has the content of "dataTables.bootsrap4.min.css" with a preceeding comment. The problem is in the encoding of "dataTables.bootstrap4.min.css" as this file is encoded in UTF-8-BOM. The resulting "datatables.min.css" has this BOM embedded in between the comment and the css.
The second problem that arises is that the resulting "datatables.min.css" is encoded in UTF-8. Here the BOM is suddenly missing. The comment then somehow confuses the browser (chrome, edge) to not load the css correctly.
<- dataTables.bootstrap4.min.css
<- datatables.min.css
If in any case more information is needed i will gladly help out.
Replies
No one here thinks this is a problem?
Yep, we do, but we also like to sleep
We're based in the UK, so it's 8AM here!
Please could you post the link to the URL that will generate these files, please. If you look in the generated file, you'll find that in the header.
Colin
I don't want to sound rude, but the difference between sleeping and not responding for over a month is like the difference between night and day...
Since this is so old, i don't know the original link. Maybe it was https://datatables.net/download/#bs4/dt-1.10.24
Likely Colin thought the same as I... Your second post was May 7 and your original was April 7. I didn't pay that close of attention and thought both were the same day.
Do you still have those files with the problem? If so the link can be found by opening either the CSS or JS.
Kevin
Because it did not work back then i removed the comment and put
@charset "UTF-8";
in front of the file.
Initially I read it wrong as well! Although to be honest a month of sleep sounds rather good!
Apologies we missed your post originally - as you'll see there forums here are busy and although we try, and there are awesome community members like Kevin helping, we aren't always able to answer every single one.
I've got to confess I thought I've fixed this issue a while back - but obviously let! Let me dig into it a bit more and get back to you.
Allan
I've just tried this, but was unfortunately unable to reproduce the error.
Colin - could you try the following and let me know how it goes for you please?
Download options:
Download the package and unzip. Then place the following into a
test.html
file:And load it up in a browser (file:// is fine for this - doesn't need a web-server).
I get this:
Allan
Yep, I did the same, and also the CDN hosted, i.e.
and the page loaded without errors. Are you still seeing the problem, as Allan said, it may have been already addressed?
Colin
Using https://datatables.net/download/#bs4-4.1.1/jq-3.3.1/dt-1.10.24 i get a different result when using the files from the webserver than when using it from the local file system:
The css- and js-files on the file system are taken straight from the downloaded zip. The downloaded files in the archive look exactly the same as the ones on the cdn. I have no clue why this behaves differently.
Tested with:
Chrome Version 90.0.4430.212 (Offizieller Build) (64-Bit)
Edge Version 90.0.818.56 (Offizielles Build) (64-Bit)
That's because the local one is only including two files,
datatables.min.css
anddatatables.min.js
, whereas that long URL into the CDN is including many files as part of that URL, which you also need to include locally.Colin
I clicked the link you provided and downloaded the concatenated files. Looks like it works with the minified files:
The screenshot is Chrome 90.0.4430.93 (Official Build) (x86_64) on a Mac. It also works with Safari. I don't have a way to test with Edge.
Have you tried incognito mode or clearing the browser's cache?
Kevin
UTF-8 Encoding:![UTF-8](https://datatables.net/forums/uploads/editor/91/0cx6l2k51h65.png)
ANSI Encoding:![ANSI](https://datatables.net/forums/uploads/editor/c1/431ztgdkp2yn.png)
My guess is that the downloaded files do not have an encoding header on them while the CDN ones do.
You really should be including a
<meta charset="UTF-8">
tag in your headers anyways, but it might be something for the admin team to look into.Got it. I removed
<meta charset="UTF-8">
and now see this with the local files:Will let the developers comment on why the difference when loading locally.
Kevin
@colin
I don't think what you said about including files is correct. To my understanding when selecting minify and concatenate, the two files have all the necessary stuff packed together in those files. The browser dev tools do not complain about any missing files.
@kthorngren
In this simple example i can confirm that putting
<meta charset="UTF-8">
in the html-head fixes the problem. In my realworld html page i already have it right there and its not helping. Only putting@charset "UTF-8";
in front of the css file fixes the problem for me there.Can you link to that please?
Our files are UTF-8, so it would be up to the web-server to announce them as such. Using the
<meta charaset
short tag is the equivalent to the web server announcing the files as UTF-8 which is why that will allow it to work. That said, my test file above didn't use the meta short tag - perhaps my browser / OS is assuming UTF-8 by default?Allan
Interesting - I've just tried it in Chrome without the meta short and see the error. On Firefox it is displaying correctly!
Checking the character set (
document.characterSet
) in each:That certainly explains the difference between the browsers with local files.
It doesn't with a published HTML page though. It would be worth checking what character set your browser thinks it is displaying the page in.
Allan
p.s. The Chrome one is rather an odd choice since I'm using Ubuntu 20.04...
Unfortunately the site is on our company intranet, so i can't share a link. But as you can now reproduce the problem i think its no longer needed anymore.
I have checked this now, both Chrome and Egde on Windows 10 report "windows-1252" for the character set.
I'd say that's the issue and the fix then. Add the meta tag to override Chrome's dodgy default there
.
Allan