DataTables download builder - Bootstrap

DataTables download builder - Bootstrap

BalkothBalkoth Posts: 21Questions: 1Answers: 0
edited April 2021 in Bug reports

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

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

    No one here thinks this is a problem?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

    Because it did not work back then i removed the comment and put

    @charset "UTF-8";

    in front of the file.

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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:

    <!doctype html>
    <html>
       <head>
          <title>Test</title>
          <link href="datatables.css" rel="stylesheet" type="text/css" />
          <script src="datatables.js"></script>
          <script>
             $(function() {
                      $('#example').DataTable();
             });
          </script>
       </head>
       <body>
          <table id="example" class="table table-striped nowrap" width="100%">
             <thead>
                <tr>
                   <th>Name</th>
                   <th>Position</th>
                   <th>Office</th>
                   <th>Age</th>
                   <th>Start date</th>
                   <th>Salary</th>
                </tr>
             </thead>
             <tfoot>
                <tr>
                   <th>Name</th>
                   <th>Position</th>
                   <th>Office</th>
                   <th>Age</th>
                   <th>Start date</th>
                   <th>Salary</th>
                </tr>
             </tfoot>
             <tbody>
                <tr>
                   <td>Tiger Nixon</td>
                   <td>System Architect</td>
                   <td>Edinburgh</td>
                   <td>61</td>
                   <td>2011/04/25</td>
                   <td>$3,120</td>
                </tr>
                <tr>
                   <td>Garrett Winters</td>
                   <td>Director</td>
                   <td>Edinburgh</td>
                   <td>63</td>
                   <td>2011/07/25</td>
                   <td>$5,300</td>
                </tr>
             </tbody>
          </table>
       </body>
    </html>
    

    And load it up in a browser (file:// is fine for this - doesn't need a web-server).

    I get this:

    Allan

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Yep, I did the same, and also the CDN hosted, i.e.

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.24/datatables.min.css"/>
     
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.24/datatables.min.js"></script>
    

    and the page loaded without errors. Are you still seeing the problem, as Allan said, it may have been already addressed?

    Colin

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

    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)

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    That's because the local one is only including two files, datatables.min.css and datatables.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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    edited May 2021

    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

  • JLegaultJLegault Posts: 31Questions: 6Answers: 2

    UTF-8 Encoding: UTF-8

    ANSI Encoding: ANSI

    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.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0
    edited May 2021

    @colin

    That's because the local one is only including two files, datatables.min.css and datatables.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.

    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.

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    In my realworld html page

    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

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin
    edited May 2021

    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:

    • Chrome: windows-1252
    • Firefox: UTF-8

    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...

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

    Can you link to that please?

    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.

    It would be worth checking what character set your browser thinks it is displaying the page in.

    I have checked this now, both Chrome and Egde on Windows 10 report "windows-1252" for the character set.

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    I'd say that's the issue and the fix then. Add the meta tag to override Chrome's dodgy default there :).

    Allan

This discussion has been closed.