Fixed Header th columns miss aligning with td columns

Durgaprasad Nakka

i have a datatable with x,y scrollbars table header columns are not aligning with table body columns in IE browser other browsers it is working fine.
I am using nowrap class need text to be always in single line, with drop down selection of changing data even alignment even going worst, tried below scripts
$($.fn.dataTable.tables(true)).DataTable().columns.adjust().draw()

but not resolved

kthorngren

The FixedHeader docs state this:

Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

You can also look at the Compatibility Matrix.

Kevin

Durgaprasad Nakka

Thanks kthorngren,
in other pages also i have same scenario where it is working as expected, in this case only difference is my
1) table inside tabs and collapse panel
2) loading data as per drop down selection using $('#myTable').DataTable().destroy(); in onchange function.
3) i have multiple tables in one page(html)

suggest if i am missing anything

kthorngren

1) table inside tabs and collapse panel

You can try columns.adjust() after displaying the panel.

2) loading data as per drop down selection using $('#myTable').DataTable().destroy(); in onchange function.

Not sure without seeing it.

3) i have multiple tables in one page(html)

Normally this is not a problem.

suggest if i am missing anything

As the docs state there is a known incompatibility with FixedHeader and Datatables scrolling features. The problem is due to how they are architected. They don't always work well together. You can remove one of them from your Datatable config.

Kevin

Durgaprasad Nakka

kthorngen,
i used columns.adjust() API here is my code please suggest

CreateEmptyGuarateeDetailsGrid(gridName, gridContainer, gridID, gridHeadID, gridBodyID);

if (resultData.length > 0)
{
    $('#' + gridID).show();
}

for (var i = 0; i < resultData.length; i++)
{
    LoadGuaranteeLineItem(gridName, gridContainer, gridID, gridHeadID, gridBodyID, resultData[i], IsPrefColumsToShow);
}
$('#' + gridID).dataTable().fnDestroy();
$('#' + gridID).empty();
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $($.fn.dataTable.tables(true)).css('width', '100%'); $($.fn.dataTable.tables(true)).DataTable().columns.adjust().draw();

colin

Hi @Durgaprasad Nakka ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin