jquery datatable not responsive with multi select search

hamdi_jmii

I have a big problem with my datatable style.
When the number of columns expanded, my datatable pop out from my bootstrap div.

NB: When I remove the filtered lists the table is well responsive.

this is my html div:

 <div class="responsive-table">
             <table id="partnumber_table" class="table table-striped table-bordered display" width="100%" cellspacing="0">
                <thead>
                  <tr>                       
                     <th>ID</th>
                    <th>Project (Z1)</th>
                    <th>Component (Z2)</th>
                    <th>Type (Z0)</th>
                    <th>Author</th>
                    <th>Date</th>
                    <th>Version (Z3)</th>
                    <th>Local</th>
                    <th>Part number</th>
                     <th></i></th>
                     <th></i></th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>                       
                     <th>ID</th>
                    <th>Project (Z1)</th>
                    <th>Component (Z2)</th>
                    <th>Type (Z0)</th>
                    <th>Author</th>
                    <th>Date</th>
                    <th>Version (Z3)</th>
                    <th>Local</th>
                    <th>Part number</th>
                  </tr>
                </tfoot>                    
                <tbody >                 
               </tbody>
              </table>
              </div>

-And this is my js code for datatable.

table =  $('#partnumber_table').DataTable( {


                   "data": results,
                   "columns": [

                             { "data": "id" },
                             { "data": "project" },
                             { "data": "component" },
                             { "data": "type" },
                             { "data": "author" },
                             { "data": "date" },
                             { "data": "version" },
                             { "data": "local" },
                             { "data": "part_number" },
                             {
                               "className":      'update-control',
                               "orderable":      false,
                               "data":           null,
                               "defaultContent": ''
                              },
                              {
                              "className":      'delete-control',
                              "orderable":      false,
                              "data":           null,
                              "defaultContent": ''
                               }
                               ],


       initComplete: function () {
        var select ;
        var col_id=['Id','Project','Component','Type','Author','Date','Version','Local','Part_Number','update','delete'];
        var type_input=['input','input','input','input','input','date','input','input','input'];
        var index=0;            
        this.api().columns().every( function () {
        id=col_id[index];
        var column = this;
        console.log(column);

        select = $('<select style="width: 200px; float: left;" onchange="this.nextElementSibling.value=this.value"></option></select><input id="'+id+'" type="'+type_input[index]+'" style="width: 185px; margin-left: -199px; margin-top: 1px; border: none; float: left;"/>')
                  .appendTo( $(column.footer()).empty() )
                  .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );
                $( "#"+id ).on('input',function() {
           var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
             });


            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )

            } );
            index++;

        });

    }
           });

Also this is my css and js requirements:

<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.12/css/dataTables.bootstrap.min.css"/>
<script type="text/javascript" src="jQuery-2.2.3/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="Bootstrap-3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="DataTables-1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="DataTables-1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="asset/js/jquery.ui.min.js"></script>
<script src="asset/js/bootstrap.min.js"></script>

I attached below a screenshot that describe my ugly view.
My table pop out from the bootsrap div
Please, How can I resolve this issue ?

allan

NB: When I remove the filtered lists the table is well responsive.

In your select elements you have style="width: 200px;. You could perhaps use 100% instead for the width, allowing the table to shrink down.

Beyond that, you could consider using Responsive to have columns automatically hide.

Allan