Answers

• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  April 2017

  Do you have width="100%" applied to your table in HTML?

  Kevin
• t0n1zz Posts: 32Questions: 19Answers: 0

  April 2017

  yes i have....
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  April 2017

  Many times that's the issue. Can you post a link showing the problem for troubleshooting?

  Kevin
• t0n1zz Posts: 32Questions: 19Answers: 0

  April 2017

  hmm it just a default datatable initialization with scrollx and select extension enabled... in bootstrap modals....
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  April 2017 edited April 2017

  Your Datatables config might be simple / default but the rest of your code is custom to your environment and that is what we need to see.

  I found a Bootstrap Modal example and incorporated Datatables into it. With scrollX and select the headers look fine.

  You can see it here:
  http://live.datatables.net/judogama/1/edit

  In order to help you we need more info from you.

  Kevin
• t0n1zz Posts: 32Questions: 19Answers: 0

  April 2017

  well i just don't have any idea how to give you the link since i tried it in local environment..

  maybe if this information can help:
  1. i am using adminlte bootstrap template which quite popular and support datatable
  2. i am using select extension from datatables
  3. i am now using responsive extension from datatables too, since after trying a few way i decided to use responsive to solve this header missaligned issue, but it is still exist

  this is exact same problem like when i using datatable in bootstrap tabs, whats different is there is a workaround in this site for handling bootstrap tabs, but nobody mention anything about bootstrap modals, most of solution is just add widht = 100% (which is already added since first time i using this datatable)
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  April 2017

  Any chance you can build a test case like the one I built? You can modify what I have if you like.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Telling us what you have doesn't provide enough details to help. Showing us what you have does. A problem that can be seen in action is very helpful. At a minimum post the relevant (CSS and JS includes, HTML for the table and modals and JS) code here.

  Kevin
• t0n1zz Posts: 32Questions: 19Answers: 0

  April 2017 edited April 2017

  okay after i testing it, i find that the header not aligned if i enabled scrollY: '50vh', and i need this feature, so what should i do.... or maybe here i will add my entire table javascript

  `
  var areapanitia = $('#areapanitia');

  var tabletambahpanitia = $('#datatabletambahpanitia').DataTable({
      dom: 'ti',
      select: {
          style:    'os',
          selector: 'td:not(:last-child)'
      },
      scrollY: '50vh',
      autoWidth: true,
      scrollCollapse : true,
      responsive:{
          details:{
              type: 'column',
              target: -1
          }
      },
      columnDefs: [ {
          className: 'control',
          orderable: false,
          targets:   -1
      }],
      paging : false,
      stateSave : false ,
      language: {
          buttons : {},
          select:{
              rows:{
                  _: "",
                  0: "",
                  1: ""
              }
          },
          "sProcessing":   "Sedang proses...",
          "sLengthMenu":   "Tampilan _MENU_ entri",
          "sZeroRecords":  "Tidak ditemukan data yang sesuai",
          "sInfo":         "Tampilan _START_ sampai _END_ dari _TOTAL_ entri",
          "sInfoEmpty":    "Tampilan 0 hingga 0 dari 0 entri",
          "sInfoFiltered": "(disaring dari _MAX_ entri keseluruhan)",
          "sInfoPostFix":  "",
      }
  });
  
  $('#searchpanitia').keyup(function(){
      tabletambahpanitia.search($(this).val()).draw() ;
  });
  
  tabletambahpanitia
      .on( 'select', function ( e, dt, type, indexes ) {
          var id = $.map(tabletambahpanitia.rows({ selected: true }).data(),function(item){
                      return item[0];
                  });
          var foto = $.map(tabletambahpanitia.rows({ selected: true }).data(),function(item){
                      return item[1];
                  });
          var name = $.map(tabletambahpanitia.rows({ selected: true }).data(),function(item){
                      return item[3];
                  });
          var tempat = $.map(tabletambahpanitia.rows({ selected: true }).data(),function(item){
                      return item[6];
                  });
          var htmlpanitia = '<div class="col-sm-12" id="widgetpeserta">';
              htmlpanitia += '<div class="box box-widget widget-user-2"">';
                  htmlpanitia += '<div class="widget-user-header bg-aqua">' ;
                      htmlpanitia += '<div class="widget-user-image">';
                          htmlpanitia += '<img class="img-thumbnail" src="'+foto+'" alt="User Image">';
                      htmlpanitia += '</div>';
                      htmlpanitia += '<input type="text" name="panitia" style="display:none;" value="'+id+'"/>'
                      htmlpanitia += '<h3 class="widget-user-username">'+name+'</h3>';
                      htmlpanitia += '<h5 class="widget-user-desc">'+tempat+'</h5>';  
                  htmlpanitia += '</div>';            
              htmlpanitia += '</div>';                
              htmlpanitia += '</div>';
  
          areapanitia.prepend(htmlpanitia);
          $('#tugaspanitia').show();
      } )
      .on('deselect',function(e, dt, type, indexes){
          $('#widgetpeserta').remove();
          $('#tugaspanitia').hide();
      });
  

  `
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  April 2017 edited April 2017

  Found this recent thread regarding scrollY and header alignment issues with hidden tables:
  https://datatables.net/forums/discussion/41587

  Sounds like you may want to use columns.adjust() to align the columns when the modal opens.

  Kevin
• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  April 2017

  Completely agree. If the table is initialised hidden you need to use the method Kevin suggested to make everything align.

  Allan
• t0n1zz Posts: 32Questions: 19Answers: 0

  April 2017

  hmm so how to do that column adjust in modal?
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  April 2017

  how to do that column adjust in modal?

  My suggestion is to listen for the event that opens the modal then use the columns.adjust in that event listener. You may need to use a setTimeout delay like the last example in the discussion I mentioned so the modal has time to display before the columns.adjust executes.

  Kevin