Column headers misaligned using sScrollX

dr3x

Setting the sScrollX options causes column headers to be misaligned until I click on one of the sort icons.

Widths on each td in dataTables_scrollHead are set to 0px until sort is clicked and then they are set to match the relevant body column width.

Digging into the functionality of the library but is there a way to invoke the functionality that sets the column header width to the width of the body columns without sorting the table?

allan

As required in the forum rules, and clearly stated in the "New Discussion" form - please link to a test case showing the issue. Otherwise we cannot offer any help.

Allan

dr3x

Yes unfortunately it is difficult to pull out just the dataTable part of the issue from the Backbone Marionette and Bootstrap functionality it is part of.

So I found a workaround which is to invoke fnDraw again after the page is rendered.

[code]
this.oTable = this.$el.find('#o-table').dataTable(this.dtOptions);
...
$('#modal').on('shown.bs.modal', function() {
if (this.oTable) this.oTable.fnDraw();
});
[/code]

dr3x

Unfortunately while this works consistently in Chrome on CentOS it doesn't work in Chrome on Mac oddly enough. So I will attempt to recreate the issue in JSFiddle and post

dr3x

Was able to recreate this in jsFiddle, reposting as http://datatables.net/forums/discussion/20127/column-headers-misaligned-until-sort (because I wasn't able to change the discussion header to remove sScrollX which turns out to be not relevant). Please close this.

robertbrower

Call fnAdjustColumnSizing after you create your data table.