Issue with squished headers

CenterFound

I've read numerous forum posts on the squished header, though they are in legacy 1.9.
I believe I found the correct function to call to correct the issue, but I can't get this to work in my code.
I'm a novice with JQuery, but trying to pick this up quickly.
I have a 5 tabs with a table at each tab.
Seeking a working solution to display the headers correctly in the non-active tabs, when they are selected.
I have tried using the tabs() function in JQuery, but this fails with an error saying tabs() is not a function.
As a result, I need another way to correct the header, but so far everything I've tried has failed.

table.fixedHeader.adjust() should be the correct method, but I'm having no success in resizing my headers correctly.

I will add an example once the live site returns to service.

Here is my javascript code

<script type="text/javascript"> $(document).ready(function () {
$('#networkHistory a').click(function (e) { e.preventDefault();
$(this).tab('show'); $('#networkHistory a[href="#sag"]').tab('show');
$('#networkHistory a[href="#tlg"]').tab('show'); $('#networkHistory a[href="#ngeag"]').tab('show');
$('#networkHistory a[href="#eag_mms"]').tab('show'); $('#networkHistory a[href="#eag_sms"]').tab('show');
``` });

```            // This section doesn't work tabs is not a function
```            $("#networkHistory").tabs({
```                activate: function(event, ui) {
```                   if (ui.newPanel.selector == "#tlg") {
```                        alert("tab tlg selected");
```                   }
```                }
```            });

// This section doesn't work $(window).bind('resize', function () {
tableSAG.fixedHeader.adjust(); tableTLG.fixedHeader.adjust();
tableNGEAG.fixedHeader.adjust(); tableEAG_MMS.fixedHeader.adjust();
tableEAG_SMS.fixedHeader.adjust(); });
}; var tableSAG = $('#gridSAG').DataTable({
"sPaginationType" : "full_numbers", "ajax": {
"url" : "data/getdata_NetHistory_SAG.php", data: function(data) {
return $.extend( {}, data, { "Global" : $('#global_sc').val(),
"useWild" : function () { if($("#useWild").is(':checked'))
return 1; // checked else
return 0; // unchecked }
}); }
}, "processing" : true,
"serverSide" : true, "fixedHeader" : true,
"lengthMenu" : [[10, 25, 50, 100, 200],[10,25,50,100,200]], "pageLength" : 25,
"sScrollX" : "110%", "sScrollY" : "600px",
"bScrollCollapse": true, "columnDefs": [
{ "type": "signed-num", "targets": 3} ],
dom : 'lBfrtip', buttons: [
'copy', 'excel' ]
}); $('#global_sc').on( 'keyup click', function () {
filterShortCode(); } );
}); </script>
</body> </html>

allan

Happy to take a look into it if you post a link to a test case showing the issue, per the forum rules.

Allan

CenterFound

Thanks Allan - I will get an example on the live site later today.

catonalake

just wondering if the answer was posted to this?
I have a modal window that opens with a datatable populated with an ajax call.

Columns with data are fine, but the headers are squished to the left
thanks in advance for your help!

I tried a few options to no avail including:

columns.adjust()
columns.adjust().redraw()
fixedHeader.adjust()

any help would be really appreciated!

kthorngren

Try columns.adjust().draw(). This needs to be executed after your modal is opened.

Kevin

catonalake

thanks, @kthorngren - I have been able to prove that in the console - so I know it works.. but was struggling with where to fire that command since the table was being loaded with an ajax call.

The good news, after more time testing than i would like to admit, I found the solution - it is all about the modal event trigger - and sharing how i got around it here
1. i am using bootstrap modal to present my datatable results
2. the table in the modal was not yet visible and the load of the table in the modal was being done via an ajax call in the "show.bs.modal" event
3. i changed the modal trigger event to "shown.bs.modal" and all works

One letter ! that 'n' in "shown" made all the difference given the way the event is fired (e.g. right away vs. after modal is visible)

so now when I initialize my table in the "shown" modal event with .columns.adjust().draw() methods it works!

All the best!
Best,
Cathy

allan

Hi Cathy,

Thanks for posting back. Great to hear you've got it resolved by using shown rather than show.

Allan