jQuery Datatable issue with scrollX and Bootstrap modal

Question

In my application I'm opening a modal that contains a jQuery Datatable and I'm trying to use the scrollX option, but I have the following output:

I saw on jQuery Documentation how to solve this problem with Bootstrap tabs, but nothing on modal. If you need anything from my project, I'll update the question. I tried

$('#vendorsModalTable').on('draw.dt', function () {
    $('#vendorsModalTable').DataTable().scroller.measure();
});

but nothing happened. Any help is much appreciated.

Answer 1

If someone has the same problem as me, I solved this by making the ajax call on 'shown.bs.modal'. What I was actually doing was creating the table before it was visible so there was my problem. Now, I open the modal and only then I initialize the datatable. Also, I had to use 'destroy': true for this to work. As an example, this is my simplified code:

$('#assignVendorModal').on('shown.bs.modal',function(){
    tableModal = $("#vendorsModalTable").DataTable({
    ajax:{
        url:[my_url],
        dataSrc:function(data){
            //Do something maybe with the data...
        }
    },
    "initComplete":function(settings,json){
        //When table is initialized...
    },
    columns:[
        //columns data mapping
    ],
    "scrollX":true,
    "destroy":true
    });
});