Horizontal scroll stops working after "raw detail" functionality was added.

sergibondarenko

I used this example https://datatables.net/examples/server_side/row_details.html
The scroll worked before. Now I don't see it and the table became wider.
Below you can find a code for the function that builds the table. All "row details" functionality is commented.

// Restricted Table builder
var buildRecordsTableRestricted = function(json_objs, table_name, div_id, colls_arr){
    //console.log('table col= ' + colls_arr);
    var myTable = '<table class="table table-striped table-bordered dislpay" id='
                    + table_name +' cellspacing="0" width="100%"></table>';

    table_name = '#' + table_name;
    div_id = '#' + div_id;

    $(table_name).remove(); // Remove table
    $('#records_table_wrapper').remove();   // Remove table
    $(div_id).empty();
    $('#output-free-search').empty();
    $(div_id).append(myTable);

    try {
        var hit = json_objs.hits.hits[0];
        var hr_num = Object.keys(hit._source).length; 
    }
    catch(err) {
        $(table_name).empty();
        $(div_id).append("<div class='alert alert-danger' role='alert'>No results found!</div>");
    }
    
    // Loop through _source keys array and append them to <th>
    var thead = $('<thead>');
    var tfoot = $('<tfoot>');
    var tbody = $('<tbody>');
    $(table_name).append(tbody);

    // Fill <thead>
    var tr = $('<tr>');
    thead.append(tr);
    //tr.append('<th class="details-control sorting_disabled"></th>');
    tr.append('<th>score</th>');
    tr.append('<th style="display:none;">id</th>');

    for(var i in colls_arr){
        tr.append('<th>' + colls_arr[i].split('.')[1] + '</th>');
    }
    $(table_name).append(thead); 
    
    // Fill <tfoot>
    tr = $('<tr>') 
    tfoot.append(tr);

    tr.append('<th>score</th>');
    for(var i in colls_arr){
        tr.append('<th>' + colls_arr[i].split('.')[1] + '</th>');
    }
    $(table_name).append(tfoot);

    // Loop through all received documents and add cells
    $.each(json_objs.hits.hits, function(key, value){
        hit = value;
        tr = $('<tr>'); // Create a row

        //tr.append('<td class="details-control"></td>');   // Row details
        tr.append('<td>' + hit._score + '</td>');   // Get score
        tr.append('<td style="display:none;">' + hit._id + '</td>');    // Get score

        for(var j in colls_arr){
            // Create a cell and append it to the row created above
            if(colls_arr[j].split('.')[0] == hit._type) // If parent doc, take fields from _source
                tr.append('<td>' + hit._source[colls_arr[j].split('.')[1]] + '</td>');
            else {  // If child doc, take fields from _source.children[type][i][field]
                var type = colls_arr[j].split('.')[0];
                var field = colls_arr[j].split('.')[1];
                if(Object.keys(hit._source.children[type]).length > 0){
                    var data = [];
                    for(var l = 0; l < Object.keys(hit._source.children[type]).length; l++){
                        // Populate data arr with value if the value doesn't already in the arr 
                        if (data.indexOf(hit._source.children[type][l]['_source'][field]) == -1)
                            data.push(hit._source.children[type][l]['_source'][field]);
                    }
                    // If num of values > 1 render them in drop down list
                    if(data.length > 1){
                        select = $('<select>');
                        for(var k = 0; k < data.length; k++){
                            select.append('<option>' + data[k] + '; </option>');
                        }
                        td = $('<td>').append(select);
                        tr.append(td);
                    } else {
                        tr.append('<td>' + data[0] + '</td>');
                    }
                } else {
                    tr.append('<td>not found</td>');
                }
            }
        }
        //$(table_name).append(tr); // Append the row to the table
        tbody.append(tr);
    });

    //var dt = $(table_name).DataTable({
    $(table_name).DataTable({
        //dom: '<lf<rt>iBp>',
        "iDisplayLength": 25,
        scrollX: true,
        deferRender: true,
        scroller: true,
        "order": [],
        colReorder: true,
        dom: '<lBf<rt>ip>',
        buttons: [
            'copyFlash',
            {
                extend: 'excel',
                title: 'report',
                extension: '.xlsx'  
            },
            'colvis'
        ]
    }); //Build DataTable

    //// Display coll details
    //// Array to track the ids of the details displayed rows
    //var detailRows = [];
 
    //// Parse json data to dispay it in raw details
    //function format(rd, jd){
    //  var doc_id = rd[2];
    //  var doc_obj = {};
    //  var body = '<div><p>';

    //  // Loop through objs and find obj for the current row
    //  $.each(jd.hits.hits, function(key, value){
    //      hit = value;
    //      if(hit._id == doc_id)
    //          doc_obj = hit;
    //  });

    //  // Render doc in raw detail drop down
    //  $.each(doc_obj, function(key, value){
    //      if(key != '_source')
    //          body += '<div>' + key + ': ' + '<strong>' + value + '</strong></div>';
    //      else {
    //          $.each(value, function(key, value){
    //              if(key != 'children')
    //                  body += '<div>' + key + ': ' + '<strong>' + value + '</strong></div>';
    //          });
    //      }
    //  });

    //  // Render joined docs if exist
    //  if(('children' in doc_obj._source) && (Object.keys(doc_obj._source.children).length > 0)){
    //      var doc_children = doc_obj._source.children;
    //      body += '<h3>Joined documents</h3>';

    //      $.each(doc_children, function(key, value){
    //          if(Object.keys(key).length > 0 && key != doc_obj._type){
    //              body += '<h4>' + key + '</h4>';
    //              $.each(value, function(key, value){
    //                  if(key != '_source'){
    //                      $.each(value, function(key, value){
    //                          body += '<div>' + key + ': ' + '<strong>' + value + '</strong></div>';
    //                      });
    //                  } else {
    //                      $.each(value._source, function(key, value){
    //                          body += '<div>' + key + ': ' + '<strong>' + value + '</strong></div>';
    //                      });
    //                  }
    //              });
    //          }
    //      });
    //  }
    //      
    //  body += '</p></div>';
    //  return body;
    //}

    //$(table_name + ' tbody').on('click', 'tr td.details-control', function(){
    //    var tr = $(this).closest('tr');
    //    var row = dt.row(tr);
    //    var idx = $.inArray(tr.attr('id'), detailRows);
 
    //    if (row.child.isShown()) {
    //        tr.removeClass('details');
    //        row.child.hide();
 
    //        // Remove from the 'open' array
    //        detailRows.splice(idx, 1);
    //    }
    //    else {
    //        tr.addClass('details');
    //        row.child(format(row.data(), json_objs)).show();
 
    //        // Add to the 'open' array
    //        if (idx === -1) {
    //            detailRows.push(tr.attr('id'));
    //        }
    //    }
    //} );
 
    //// On each draw, loop over the `detailRows` array and show any child rows
    //dt.on('draw', function(){
    //    $.each(detailRows, function(i, id){
    //        $('#'+id+' td.details-control').trigger('click');
    //    });
    //});
}