CSS for DataTables library is apparently not loading #79
Assignees
Labels
Comments
fabiodrg
added
bug
|
Actually, the problem is that DataTable library uses images for the sorting icons, although they don't seem to provide them on the downloads section 🤷 I could extract the images from the live demos and fix the CSS rules to point to the correct location, but I think I will just simply use Unicode characters to present the arrows. That's enough to indicate that columns are sortable and whether a column is sorted ascendingly or descendingly. |
|
Yeah, keeping it simple sounds the way to go here |
|
Thanks for your input! I have some work ready locally, I just need a few minutes to organize the commits and prepare a PR. |
fabiodrg
added a commit
that referenced
this issue
Oct 17, 2020
fabiodrg
added a commit
that referenced
this issue
Mar 6, 2021
fabiodrg
added a commit
that referenced
this issue
Oct 29, 2021
This commit fixes the following: - The sorting indicators from DataTable lib were missing (#79). In order to fix it, it was decided to add explicit classnames and wrap the table elements around custom classes due CSS specificity. After that, it was matter of adding CSS rules for the said classes that add unicode arrows. It takes advantage of the fact that DataTable lib changes the class name of the table header cell 'th', depending if data is sorted asc or desc - DataTables requires the `<table>` to have an explicit `<thead>`. Therefore, it was added a mechanism to find potential safe table headers, for instance, a `tr` full of `th` nodes. If its find, it makes the necessary changes to move the `<tr>` into a new `<thead>` element
fabiodrg
added a commit
that referenced
this issue
Oct 29, 2021
I thought there were no icons at all, as described in #79, some problem with loading the images or CSS rules. Turns out the problem is we have the icons locally, packed with the extension. And in order to load static files, you need the absolute path that depends on the extension ID. Moreover, it depends on the browser itself. For instance, chrome uses the `chrome-extension://` protocol, while firefox uses `moz-extension://` protocol. The the datatables.min.css you can see URLs like `chrome-extension://__MSG_@@extension_id__`, a trick to represent the absolute path that can be used in CSS. Note that in JS there is a proper API for that. Firefox does not support this link in CSS, thus.. no icons! Fortunatelly, it works if I change the protocol for `moz-extension`. The final solution was to override the CSS rules with a `background-image` with two URLs. Technically, this is used to overlap multiple background images. But I know that one of them will fail accordingly with the browser you running. Thus.. it works and prevents a JS approach to set the URLs dynamically. I also updated the icons to be more visible.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Now:
Expected results:
Basically, the sorting buttons are there and I click on them, but they are not styled.
The text was updated successfully, but these errors were encountered: