Please help with footer misaligment (I am loosing sanity)

marianopeck

Hi guys,

I cannot believe what is happening and for the life of me, I cannot see why it happens. I have a misaligment between body and footer. On this jsfiddle I can't reproduce the issue. As you can see, body and footer are aligned. When I try to render that exact html but the html coming from my app server, then I had the misaligment. Even more unbelievable... once I have rendered the table (with the misaligment) using the app, I get the html source of it, I paste it into a new file , open it with Chrome, and it works! See attached file savedStatic.html. WTF!

See "brokenMyApp.png". You can see I am serving from localhost and if you zoom you can see the misaligment between footer and body.

Similarly, if I add the css line: ".reportHeaderFilterDateContainer > input, .reportHeaderFilterStringContainer > input { width:100% !important ; }" , the above jsfiddle still works correctly, but now on my app, I see misaligment but now between the header and the body. Again, I am supposed to be serving the same HTML+JS , CSS, and using the same exact libs. There is still a difference between my app and jsfiddle that I cannot find

In conclusion, I ONLY see the misaligment when I render it from my app. I cannot reproduce it in jsfiddle neither with saved static html.

Please, I need help. This is getting on my nerves.

Rob Brun

Hi marianopeck, have you tried this one.

$(document).ready(function() {
  $('#ajaxDpWellDressedReport415144704').DataTable({
    scrollY: 300,
    scrollX: "100%",
    scrollCollapse: true,
    paging: false,
  });

   $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();

});

marianopeck

Hi Rob,

No, I didn't try that. I wasn't aware of that. I did try "setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );" but no effect.
Anyway, I just tried yours, and still, having same issue. But thanks for the idea anyway.

allan

fnAdjustColumnSizing is just the legacy way of accessing columns.adjust().

Any way you can post a link to your app? Without being able to reproduce the error there probably isn't much help we can offer. All I can guess is that there might be some other JS component (the select boxes in the header for example?) that is shifting the alignment.

Scrolling tables column alignment is easily the most difficult topic in the DataTables core base...

Allan

marianopeck

Hi Allan,

I will try to upload current state into a testing server to see if I can reproduce it there too so that you can take a look. For the life of me I tried to make a jsfiddle that reproduces the problem, and I failed.

And yes, the column misalignment is the most complex problem I have ever found in Datatables. It always catches me. Either I break it with some of my CSS, or I break it when updating or when...

OK, let me see if I can make the server reproduce this...

marianopeck

Hi Allan,

I have sent you a private message with the link to the reproducible test case. Please let me know if you got it.

Thanks!