Bug Responsive 2.2.1 bootstrap 4 in Collapse Componet

MarisaAvast2 · January 2018

Responsive-2.2.1
https://getbootstrap.com/docs/4.0/components/collapse/

When entering a table into a collapse, the table is not responsive unless the window is resized manually. (Large and reduce again)

allan · January 2018

You need to call columns.adjust() when the table is made visible.

Allan

MarisaAvast2 · January 2018

It does not work, I tried it


 

jQuery(function($) {
  $('#collapseExample')
  
  
  
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    
    .bind('afterShow', function() {
      alert('afterShow');
    })
    
    .show(1000, function() {

        var table = $('#datatable-responsive').DataTable();
        // $('#collapseExample').css( 'display', 'block' );
        table.columns.adjust().draw(); 
        
        alert('Show Tablet');
    })
    
    .show();
    
});

OR

$('#collapseExample').collapse({
    var table = $('#datatable-responsive').DataTable();
    table.columns.adjust().draw();   
})

allan · January 2018

You need to call it after the table has been shown. Try: table.columns.adjust() inside your afterShow event handler.

Allan

MarisaAvast2 · January 2018

Thanks for your response, but I tried it too and it does not work.

allan · January 2018

If you could link to a page showing the issue I can take a look. The HTML file above doesn't actually run DataTables.

Allan

MarisaAvast2 · January 2018

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="">
<!--<![endif]-->
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="LIB/DataTables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
    <link href="LIB/DataTables/DataTables-1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="LIB/DataTables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
    <link href="LIB/DataTables/Buttons-1.5.1/css/buttons.bootstrap4.min.css" rel="stylesheet">
    <link href="LIB/DataTables/FixedHeader-3.1.3/css/fixedHeader.bootstrap4.min.css" rel="stylesheet">
    <link href="LIB/DataTables/Responsive-2.2.1/css/responsive.bootstrap4.min.css" rel="stylesheet">
    <link href="LIB/DataTables/Scroller-1.4.3/css/scroller.bootstrap4.min.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>----</title>
</head>
<body  >
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Test Collepse
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
                                        <table id="datatable-responsive1" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                          <thead>
                                            <tr>
                                                <!--<th>REF</th>-->
                                                <th>a a a a a a a a a </th>
                                                <th>b b b b b b bb  bb </th>
                                                <th>cc c c c c c c c c </th>
                                                <th>dd d d d d d d d d d</th>
                                            </tr>
                                          </thead>
                                          <tbody>
                                            <tr><td align='center'>aaaaaaa</td><td align='center'>2</td>
                                            <td align='center'>1</td>
                                            <td align='center'>4</td></tr><tr><td align='center'>bbbbbbb</td><td align='center'>1</td>
                                            <td align='center'>2</td>
                                            <td align='center'>5</td></tr><tr><td align='center'>ccccccccccc</td><td align='center'>1</td>
                                            <td align='center'>3</td>
                                            <td align='center'>6</td></tr>                                          </tbody>
                                        </table>   
  </div>
</div>                                    
    <!-- Datatables -->
    <script src="LIB/DataTables/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="LIB/DataTables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
    <script src="LIB/DataTables/Buttons-1.5.1/js/dataTables.buttons.min.js"></script>
    <!--<script src="LIB/DataTables/Buttons-1.5.1/js/buttons.bootstrap4.min.js"></script>-->
    <script src="LIB/DataTables/Buttons-1.5.1/js/buttons.flash.min.js"></script>
    <script src="LIB/DataTables/Buttons-1.5.1/js/buttons.html5.min.js"></script>
    <script src="LIB/DataTables/Buttons-1.5.1/js/buttons.print.min.js"></script>
    <script src="LIB/DataTables/FixedHeader-3.1.3/js/dataTables.fixedHeader.min.js"></script>
    <script src="LIB/DataTables/KeyTable-2.3.2/js/dataTables.keyTable.min.js"></script>
    <script src="LIB/DataTables/Responsive-2.2.1/js/dataTables.responsive.min.js"></script>
    <script src="LIB/DataTables/Responsive-2.2.1/js/responsive.bootstrap4.min.js"></script>
    <script src="LIB/DataTables/Scroller-1.4.3/js/dataTables.scroller.min.js"></script>
    <script src="LIB/DataTables/JSZip-2.5.0/jszip.min.js"></script>
    <script src="LIB/DataTables/pdfmake-0.1.32/pdfmake.min.js"></script>
    <script src="LIB/DataTables/pdfmake-0.1.32/vfs_fonts.js"></script>   
<!-- Datatables -->
    <script>
      $(document).ready(function() {
          
        var handleDataTableButtons = function() {
          if ($("#datatable-buttons").length) {
            $("#datatable-buttons").DataTable({
              dom: "Bfrtip",
              buttons: [
                {
                  extend: "copy",
                  className: "btn-sm"
                },
                {
                  extend: "csv",
                  className: "btn-sm"
                },
                {
                  extend: "excel",
                  className: "btn-sm"
                },
                {
                  extend: "pdfHtml5",
                  className: "btn-sm"
                },
                {
                  extend: "print",
                  className: "btn-sm"
                },
              ],
              responsive: true
            });
          }
        };
              $('#datatable-responsive2').dataTable( {
                "bFilter": false,
                "bLengthChange": false,
                "iDisplayLength": 100,
                "bInfo": false,
                "bPaginate": false,
                "autoWidth": true
              } );
                          $('#datatable-responsive1').dataTable( {
                "bFilter": false,
                "bLengthChange": false,
                "iDisplayLength": 100,
                "bInfo": false,
                "bPaginate": false,
                "autoWidth": true
                
              } );
        TableManageButtons = function() {
          "use strict";
          return {
            init: function() {
              handleDataTableButtons();
            }
          };
        }();
        $('#datatable').dataTable();
        $('#datatable-keytable').DataTable({
          keys: true
        });
        $('#datatable-responsive').DataTable();
        $('#datatable-scroller').DataTable({
          ajax: "js/datatables/json/scroller-demo.json",
          deferRender: true,
          scrollY: 380,
          scrollCollapse: true,
          scroller: true
        });
        $('#datatable-fixed-header').DataTable({
          fixedHeader: true
        });
        var $datatable = $('#datatable-checkbox');
        $datatable.dataTable({
          'order': [[ 1, 'asc' ]],
          'columnDefs': [
            { orderable: false, targets: [0] }
          ]
        });
        $datatable.on('draw.dt', function() {
          $('input').iCheck({
            checkboxClass: 'icheckbox_flat-green'
          });
        });

        TableManageButtons.init();
      });
    </script>
    
<script> 
jQuery(function($) {
  $('#collapseExample')
    .bind('beforeShow', function() {
        var table = $('#datatable-responsive').DataTable();
        table.columns.adjust().draw();      
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
        var table = $('#datatable-responsive').DataTable();
        table.columns.adjust().draw(); 
      alert('afterShow');
    })
    .show(1000, function() {
        var table = $('#datatable-responsive').DataTable();
        table.columns.adjust().draw(); 
        alert('Show Tablet');
    })
    .show();
        var table = $('#datatable-responsive').DataTable();
        table.columns.adjust().draw(); 
});
</script>
    <!-- /Datatables -->     
</body>
</html>

allan · January 2018

Are you able to link to a running test case please? I've tried to put your code above into a page and changed the URLs to load, but it doesn't appear to do much. A link to a page showing the issue would be useful.

Thanks,
Allan

MrSixFinger · October 2018

Same problem. Solved with this.

jQuery(function($) {
$('#container of table')
.bind('beforeShow', function() {

})
.bind('afterShow', function() {

})
.show(1000, function() {

})
.show();
});

Bug Responsive 2.2.1 bootstrap 4 in Collapse Componet

Bug Responsive 2.2.1 bootstrap 4 in Collapse Componet

Answers

Howdy, Stranger!

Categories

DataTables

Bug Responsive 2.2.1 bootstrap 4 in Collapse Componet

Bug Responsive 2.2.1 bootstrap 4 in Collapse Componet

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables