Extra whitespace "column" in FF in 1.9.3 and misaligned headers with details row in Chrome.

superboredom

I am working with JQuery 1.8/JQueryUI 1.8.23 and Datatables 1.9.2 or 1.9.3.

Here is what my Datatable looks like:

[code]
oTable = $('#resultsTable').dataTable({
"aoColumnDefs": [{ "bSortable": false, "aTargets": [ 0 ] }],
"aaSorting": [[1, 'asc']],
"sScrollY": "400px",
"bJQueryUI": true,
"bPaginate": false
});
[/code]

I am running into two issues...

1. When I upgrade Datatables to 1.9.3 I seem to get extra whitespace between the last table column and the vertical scroll bar. This happens in Firefox 14, but not in IE 9/Chrome 21. I have flattened the JSP and made two examples (using the same css/script as the dynamic page), here they are:

http://is01.villanova.edu:7580/overseasCourses/test_1.9.2.html
http://is01.villanova.edu:7580/overseasCourses/test_1.9.3.html

I am currently using the CSS that came with the 1.9.2 Datatables package, but have tried the 1.9.3 CSS as well.

2. I am attempting to add the detail row functionality to a Datatable. In Chrome (and previously in FF), when the page is first rendered the Detail row column does not align properly.

https://www.dropbox.com/s/kh87ry6tb2sd898/chrome.png

However if you then go ahead and sort one of the columns, the header displays as you would expect. This should be test-able at the above two links as well. This happens in both 1.9.2 and 1.9.3.

Thanks for any insight. I am not typically a UI developer and I inherited this web app from someone else. The detail row issue in particular has been difficult for me to debug.

Again Allan, thanks for a great product it is far and away better than what this app originally had in place.

superboredom

I realized that those URLs were firewalled today.

These should work:

1.9.2: http://superboredom.com/test/
1.9.3: http://superboredom.com/test/index_1.9.3.html

Let me know if there is anything else I can do to help with this.

Thank you!

superboredom

It looks like a solution to issue 1 was identified: http://datatables.net/forums/discussion/11406/bscrolloversize-wrongly-calculated-for-firefox

Any suggestions as far as the table header rendering incorrectly in Chrome would be greatly appreciated.

allan

Issue 1: has been addressed in thread 11406 and the 1.9.4.dev nightly has this change and is available on the downloads page: http://datatables.net/download/ .

Issue 2: looks like there is more being crammed into the table that can be correctly displayed. Are there no warnings on the console? Can you give us a link please?

Regards,
Allan

superboredom

Hi Allan,

If you browse this link with Chrome:

http://superboredom.com/test/index_1.9.3.html

The issue should manifest itself. The "detail" column (first) in the header is collapsed. If you then click any other column header to sort, it redraws the header and then things looks correct.

Oddly, if I force/shift-reload the page in Firefox it manifests, but if I simply reload it looks OK.

IE seems to always display properly.

Maybe it is the way in which I am using the table. Is there a way to problematically force that redraw (failing a better solution).

Thanks for your time!

allan

Oh I see - I think its because the image dimensions haven't been loaded when you initialise the DataTable, and thus can't be taken into account. If you add height / width to the image tag for the button in the first column, I think it should work okay.

The alternative is to call:

> oTable.fnAdjustColumnSizing()

in $(window).load(...).

Allan

superboredom

Adding the dimensions seems to have resolved it. Brilliant! Thank you so much for your help!

Originally I was dynamically writing the HTML for the image similar to your example:

http://datatables.net/examples/api/row_details.html

but then switched it to be in the HTML by default (in an attempt to resolve the issue based on other users issues/suggestions in the forums). Would it make sense to add the image dimensions to this example as a hint to others?

Again, thank you for your help and for your efforts with Datatables.