search

DataTables / Responsive

Responsive extension for DataTables, providing support for complex tables on all device screen sizes
Other
148 stars 86 forks source link

Bootstrap datatables tab - responsive width/thead #124

Closed iKyzu closed 2 years ago

iKyzu commented 2 years ago

I have page with multiple tabs, when loading the home page (main) everything is fine, but when switching between tabs and showing datatable the width of the titles/thead is not aligned with the content. Clicking again on the same tab fixes the problem. I have attached couple articles I found describing my problem.

When switching the tabs I made a quick fix: ('a[data-toggle="tab"]').on("shown.bs.tab click", function() { setTimeout(() => $($.fn.dataTable.tables(true)).DataTable().columns.adjust(), 200); });

Which works while switching the tab from one to another, but when I am inside one tab and the hashtag of the URL is getting refreshed and the page is loading and landing on the tab page, the thead is again not aligned I need to click again on the tab to align it correctly. I spend countless hours trying different methods, reading about this issue and how to fix it.

I couldn't make this work, so I decided to search for help online.

datatable-jquery-table-header-width-not-aligned-with-body-width datatables-with-jquery-tabs-column-header-size-changed

AllanJard commented 2 years ago

Please link to a test case showing the error so we can offer help.

iKyzu commented 2 years ago

I manage to fix this issue different way 👍