Horiz. scrollbar appears at initial load allthough responsive

hagedorn

Hi everybody..

I'm using datatables in responsive mode. The problem is, that some browser witdth, the horizontal scrollbar appears at initial load. When resizing the browser by a pixel it disappears. When resizing back to former width, the horizontal scrollbar is still gone. But when reloading, its back in business.

It seems that sometimes (at table specific width) the initial calculation has one more field in it. After resizing, its one fileld less and it fits again.

Since I'm using datatables for really many tables in all kinds of constellations and the browser size is not fixed, I'm trying to figure out, how to avoid this problem or to have datatables "recalculate" after the inital calculation. The data is loaded via ajax.

This is a shortend version of the definition.

var dataTable = $('#table_' + id).DataTable({
                "autoWidth" : true,
                "searching" : false,
                "deferLoading": 0,
                "serverSide": true,
                columnDefs: {
                      {targets:0,orderable: false, className: 'control'},
                   },
                responsive: {
                    details: {
                        type: 'column'
                    }
                },
                "ajax": {
                    "url": ajaxDataUrl.replace('[[id]]', id),
                    "type": "POST",
                    "data": function ( d ) {
                       [.....]
                    }
                }
            });

Any help would be appreciated

colin

Hi @hagedorn ,

I suspect the problem is that the initial size is incorrect after the Ajax load completes. You could force a recalculation after the Ajax data load in the -option drawCallback`, something like this.

Hope that does the trick.

Cheers,

Colin

hagedorn

Perfect.. that did the trick! You're my personal hero of the day. Was there a place to find this in the docs? I thought I looked everywhere!

colin

Hi @hagedorn ,

Glad to have helped The Responsive page has a breakdown - normally there's an API method or a config option that does the trick!

Cheers,

Colin