DataTables - Custom div to make it draggable causes length menu disappear

Question

I'm using a server-side DataTable (1.10.21) showing a lot of data, so I needed to make it x-draggable to show all the results correctly. I found some options that do the job BUT that makes the length menu select disappear (the select where you choose how many record per page you want to be shown). I tried to add options to make it visible again following the documentation and some forums but with no result. If i comment out the x-draggable part, the lenght menu comes back to life again. Any help would be appreciated. Here's my DataTable script:

// render DataTable
var dataTable = $('#data_table').DataTable( {  
  // X-DRAGGABLE PART
  // Create a container div with box and drag as classes
  dom: "Bfr<'box drag't>ip",
  initComplete: function () {
    // Draggable snippet
    mx = 0;
    $(".drag").on({
      mousemove: function(e) {
        var mx2 = e.pageX - this.offsetLeft;
        if(mx) this.scrollLeft = this.sx + mx - mx2;
      },
      mousedown: function(e) {
        this.sx = this.scrollLeft;
        mx = e.pageX - this.offsetLeft;
      }
    });
    $(document).on("mouseup", function(){
      mx = 0;
    });
  },

  "processing": true,
  "serverSide": true,
  "oLanguage": {
      "sUrl": "datatables/italian.txt",                   
      },
  "ajax": {
    "url":"datatables/extraction.php",
    "data": function ( d ) {
      return $.extend( {}, d, {
        "filter": $('#filter_status').val(),
        "type": $('#filter_type').val(),
        "cat": $('#filter_cat').val(),
        "tag": tag,
      } );
    }
    // END X-DRAGGABLE PART
  },
  "columnDefs": [
    { className: "text-center", "targets": [ 3,4,8,9,10 ] },
    { className: "nowrap", "targets": [ 8,9 ] },
    { "orderable": false, "targets": [ 0,7,10 ] },
    { "width": "30px", "targets": 0 },
  ],
  order: [[1, 'desc']],

  ...other stuff...

}); // END DATATABLE

Here's how the plugin RENDERS OUT the div on top the the table where the select should be together with and without the X-Draggable part.

Without:

<div class="row">
  <div class="col-sm-12 col-md-6">
    <div class="dataTables_length" id="data_table_length">
      <label>Visualizza 
        <select name="data_table_length" aria-controls="data_table" class="custom-select custom-select-sm form-control form-control-sm">
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select> elementi
      </label>
    </div>
  </div>
  <div class="col-sm-12 col-md-6">
    <div id="data_table_filter" class="dataTables_filter">
      <label>Cerca:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="data_table"></label>
    </div>
  </div>
</div>

With:

<div id="data_table_filter" class="dataTables_filter">
 <label>Cerca:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="data_table"></label>
</div>

Answer 1

I stumbled upon the answer by chance after I had given up. Everything was caused by the definition of the "dom" attribute that excluded the page lenght button. So this:

dom: "Bfr<'box drag't>ip",

must be changed into:

dom: "Blfr<'box drag't>ip",

Just added an "l" as the Datatables documentation shows here: https://datatables.net/reference/option/dom