jquery.dataTables.min.js causes text overlapping on table status line

leizhoucn

Link to test case:
http://staging.web.emory.edu/eicf_csic_v3/about/investigators.html
Debugger code (debug.datatables.net):
Error messages shown:
No error message
Description of problem:
I have a lengthy table on the test case page with 177 entries. When using the search function provided at the top of the table, the status line "Showing 1 to 10 of 165 entries (filtered from 177 total entries)" overlaps with the page selection grid.

Our IT summarized this error as "the table information and pagination buttons are inside the same flex row, but the row isn't wide enough to accommodate the additional text when the table is filtered".

I inspected your code at https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
and found that the problematic code is on Line 163 Col 480.

Could you please help report this bug to the developer team and update the table status line rendering by either pushing the "filtered from ..." part to a second line or move the entire "Showing... (filtered...)" part to a new row under the page selection grid?

Many thanks!

kthorngren

This example seems to work properly. Resize the window and you will see the info element is adjusted.

One thing you might try is to add style="width:100%" to the table tag as shown in this example. This may or may not fix the issue but may help to allow Datatables to calculate the table width.

You can use the dom option to control where the Datatable's elements are placed. Another option might be to use the infoCallback to format the output as you would like.

Kevin

tangerine

That is not a bug. You have used an unordered list for your pagination, which is not DataTables' normal layout. You could apply your own CSS relevant to your own custom code.