Automatic column hiding moves link text out of tag

bertieb

Link to test case: none yet (sorry)
Debugger code (debug.datatables.net): averaf
Error messages shown: none
Description of problem:

First- I acknowledge I am using an older DT- 2.1.8. I have checked the changelogs for releases up to 2.3.1 and I don't see anything addressing the issue. If it is likely to change things I can try a later version but I have not yet as I'm working with an inherited legacy app (same one as my other question) which is... fragile. Alas a proper redo is not in the budget.

I searched and the closest I could see to the issue is this old one where href and onclick were being lost but that seemed to involve Angular.

Datatables here is loading data from a JSON endpoint. Some of the columns can contain links. Those links are displayed correctly in a displayed column:

and the inspected elements:

However, when the column is automatically hidden, the link text somehow ends up outside the <a ...></a> tag:

elements:

I'm not blaming DataTables for this behaviour- I can't imagine I am the first person to have a link in a responsively-hidden column!

However I am as yet at a loss to figure out why this is happening. I don't have any columnDefs targeting the column with links; and there should be no post-processing of data targeting that column- I have another table where the column with link elements was not present, and I discovered this behaviour when I added it (though it also affects other existing tables).

I will think further on this but input on how to figure out why the link text is ending up outside the element only when moved to the responsive bit would be greatly appreciated. Thank you in advance for your time.

Aside: I could not test on live.datatables.net sandbox as I get an error, the /save endpoint 403s and it complains about jQuery not being loaded?

kthorngren

That error in red at the top indicates there is currently an issue with the live.datatables.net environment. Possibly you can create the test case using https://jsfiddle.net/

Kevin

bertieb

Thanks Kevin. I was able to create a fiddle, but I'm not familiar with the interface and obliterated it twice while trying to get a permalink to share. I'll recreate it, but suffice to say- in the example as I thought, DT did not move the link text outside the <a> tag when hiding columns responsively.

FE is not my strong point, I was hoping someone more familiar with DT and tracking down issues might be able to point me where to look for the actual cause of this behaviour.

Fiddle: https://jsfiddle.net/scuwz2d3/

allan

We probably can help - but we'd need to be able to see the issue so we can debug it and understand what is going wrong. If it is an error in DataTables / Responsive I'd certainly like to fix it

Allan

kthorngren

I would start by using the browser's inspector to see if there is a styling being applied to the Responsive child row that is causing the issue. If not then it's something we will need to see to debug.

Kevin