Horiz. scrollbar appears at initial load allthough responsive

Horiz. scrollbar appears at initial load allthough responsive

hagedornhagedorn Posts: 2Questions: 1Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    edited August 2018 Answer ✓

    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

  • hagedornhagedorn Posts: 2Questions: 1Answers: 0

    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!

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

This discussion has been closed.