Column not collapsing when data overflows

SgianSgiath

Link to test case: https://www.jmu.edu/cevc/community-partners/test.shtml
Debugger code (debug.datatables.net): Updated versions per debugger and re-ran and issue persists
Error messages shown: None
Description of problem: The DataTable overflows off the page. I tried .responsive.recalc(), using inline table width of 100% this doesn't seem to resolve. I looked at DataTable forums, which mentioned some of those suggestions. I added debugger code (https://debug.datatables.net/) to my test case at https://www.jmu.edu/cevc/community-partners/test.shtml, and it only had some messages about new versions for DataTables, buttons and responsive. I updated the script version and those messages go away, but the problem persists. And now buttons don't show up. What am I missing?

kthorngren

I might be missing it but I don't see where you have installed the Responsive extension library. See the Responsive docs](https://datatables.net/extensions/responsive/) for more info. Use the Download Builder to get the code.

Kevin

SgianSgiath

That made the button return, but the issue persists.

kthorngren

You are loading datatable.js and datatables.css twice:

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.css" />
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.js"></script>

 <link href="https://cdn.datatables.net/v/dt/dt-1.13.5/b-2.4.0/r-2.5.0/datatables.min.css" rel="stylesheet"/>
 
<script src="https://cdn.datatables.net/v/dt/dt-1.13.5/b-2.4.0/r-2.5.0/datatables.min.js"></script> 

Remove the first two as they are being loaded in the combined CDN being used.

Kevin

SgianSgiath

Thanks for the pointer. Forgot to comment those out! Problem remains. I am comparing a DataTable that works with the current one that is yielding a problem.

kthorngren

Inspect one of the cells that should be hidden via responsive and you will see this style is being overridden:

The tabular-cell class is applying this style:

Forcing the cell to be displayed. Disabling that style hides all the responsive cells:

And the overridden style is now applied:

Looks like you need to remove the tabular-cell class from the td to allow responsive to work properly:

<td bordercolor="#d0d7e5" class="tabular-cell dtr-hidden" style="display: none;">...</td>

Kevin

SgianSgiath

I also found that it was due to the CSS customization. The .tabular-cell was set to always display as table-cell and since it had the !important keyword, it always displayed. I removed the !important keyword and things seem to function as expected now. Thanks for your responses