Header and footer doe s not align with body when invoking DataTable on a modal window

ralph.cabanero

I'm having trouble getting the header and footer to align with the body when invoking the table from a modal window. Been spending a lot of time trying to apply different fixes but I can't get it to work. I would really appreciate any help.

Here's the example code:
https://jsfiddle.net/u42m2cn7/1/

Thanks.

bindrid

There are know issues with JQuery with rendering object on a page while they are hidden from view. Try popping up the modal then rendering the table.

kthorngren

You can use columns.adjust() to fix the columns when the modal opens. Has something to do with Datatables not knowing the width when its initialized in a hidden window. I add the below to your fiddle after the showing the modal:

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

See updated fiddle:
https://jsfiddle.net/v8nxpa3k/

If the modal is resized the columns become out of alignment. Might need to call columns.adjust() again.

The setTimeout is a small delay to allow the modal display to complete.

Kevin

bindrid

Is this more of what you are looking for?

http://jsbin.com/vapudu/edit?html,js,output

I used the shown event to call a function that builds the table.

I also changed autoWidth from false to true.