Infinity scroll header misalignment

gastoncs

Hi
I have a table that has infinity scroll, I read about the misalignment and way of the separation between header and the body, but maybe is possible to get a fix on this, I have on the left side a navbar (class="navbar-default navbar-static-side") that gets minimize when a button is selected, when this happens the whole content-wrap get stretch to the left causing the header to slide to the left and the body section does not move it gets stretch, this causes the misalignment. Is there a way to fix this?

This is my code. If some one has a quick answer great if not let me know so I can do a jsfiddle

var oTable2 = $('#reportDetail').DataTable( {

        ordering: false,
        bLengthChange: false,
        bFilter: false,
        scrollY: 500,
        scroller: {
            loadingIndicator: true
        },
        columnDefs: [
            {
                'targets': 7,
                'searchable': false,
                'orderable': false,
                'className': 'dt-body-center',
                'render': function (data, type, full, meta){
                      return "-";                   
                }
            }
        ],
        ajax: function ( data, callback, settings ) {

            data.id = $("#reportCollection").val();

            var out = $.databaseUtil.sendGetData({
                'url':'ajax-payment-report-data',
                'data':{'data': JSON.stringify(data), 'reportName':'detail_fintrax'}
            });

            setTimeout( function () {
                callback( {
                    draw: data.draw,
                    data: out,
                    recordsTotal: out.recordsTotal,
                    recordsFiltered: out.recordsFiltered
                } );
            }, 50 );
        },
        "fnDrawCallback": function (oSettings) {

            $('.dataTables_scrollBody').slimScroll({
                height: '500'
            });
        }
    });