CODEWITHSUNDEEP
javascriptjqueryhtmlcssdatatables
Rumpleteaser
Rumpleteaser

Reputation: 4234

dataTables JS Plugin responsive width overflows set div width

Using the DataTables plugin for displaying tabular data I found that when setting a percentage width on the tables container div the plugin was performing a width calculation and setting a pixel width on the table which was actually wider than the div.

This wasn't an issue when using the table at full width in responsive mode, but when trying at halfwidth it overshot the set width and forced the browser window to scroll horizontally.

Code:

$('#' + tableID).dataTable({
    "dom": 'Rlfrtip',
    "ajax" : file,
    "responsive": true,
    "columns" : columnDataMap,
    "order": [[ 1, "desc" ]],
    "sAjaxDataProp" : "items",
    colReorder: {
        fixedColumns: 1
    },
    "columnDefs": [ {
        "targets": 0,
        "sortable": false,
        "data": null,
        "defaultContent": '...'
    } ]
});

Upvotes: 4

Views: 2332

Answers (1)

Rumpleteaser
Rumpleteaser

Reputation: 4234

You can stop DataTables from adding a (faulty) width to the table by adding the following option when initialising the plugin:

"bAutoWidth":false,

End product:

$('#' + tableID).dataTable({
    "dom": 'Rlfrtip',
    "ajax" : file,
    "responsive": true,
    "bAutoWidth":false,  
    "columns" : columnDataMap,
    "order": [[ 1, "desc" ]],
    "sAjaxDataProp" : "items",
    colReorder: {
        fixedColumns: 1
    },
    "columnDefs": [ {
        "targets": 0,
        "sortable": false,
        "data": null,
        "defaultContent": '...'
    } ]
});

Upvotes: 9

Related Questions