Replies

• allan Posts: 61,650Questions: 1Answers: 10,094 Site admin

  May 2019

  If a tab (tab A) starts loading its table and another tab (tab is selected before the load completes

  This is the key part here. If you hide the first tab, then the table doesn't have any height / width so it can't resize correctly.

  How are you currently calling the columns.adjust() method? Are you using the method shown here? That should be immune to the issue to describe since the resize will be called every time the tab is activated.

  Allan
• davedargo Posts: 10Questions: 2Answers: 0

  May 2019

  I am using a similar method to adjust the columns as described below. However, your suggestion caused me to check another issue. This only happens when the rows of the table are too long and require a child row for the additional columns that didn't fit. If the window is wide enough to accommodate all columns then only a single call to adjust() is necessary.

  I did try the static method and had the same result:

  After the first adjust:
  

  After the second adjust:

  

  Here is my adjustment code:

  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      if ($(e.target.hash).data('datatable')) {
          $(e.target.hash).data('tablevisible', true);
          $(e.target.hash + 'table').DataTable().columns.adjust();
          $(e.target.hash + 'table').DataTable().columns.adjust();
      }
  });
  
• kthorngren Posts: 20,269Questions: 26Answers: 4,765

  May 2019

  You are using the responsive extension? If so then you probably will need to use responsive.recalc().

  Kevin
• allan Posts: 61,650Questions: 1Answers: 10,094 Site admin

  May 2019

  Do you have width="100%" or style="width:100%" in your HTML table?

  Allan
• davedargo Posts: 10Questions: 2Answers: 0

  May 2019

  Yes, it had been width="100%" and was recently changed to style="width:100%;".
• davedargo Posts: 10Questions: 2Answers: 0

  May 2019

  I've done this with and without responsive.recalc() with the same results.
• allan Posts: 61,650Questions: 1Answers: 10,094 Site admin

  May 2019

  I'd need a link to a test case showing the issue in that case I'm afraid.

  Allan
• davedargo Posts: 10Questions: 2Answers: 0

  May 2019

  A test case is located here: https://jsfiddle.net/davedargo/rs3yw6d8/2/

  Hopefully, it's just something I've set wrong otherwise the test case may be helpful in determining the cause. I currently just issue two adjustments, though and all is well.

  I've set it up so that the datatable is loaded in Tab 1 but Tab 2 is set as the active display. Selecting Tab 1 will initiate:

  $('#tab1table').DataTable().columns.adjust().responsive.recalc();

  It will then issue a second adjust() after two seconds via a setInterval function. I've included that code below. With the two-second delay you should notice that the first adjustment doesn't completely adjust the window but the second adjustment does complete it. I've included the responsive.recalc() as suggested and the table width is set to 100% via style="width: 100%;".

  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    if (e.target.hash === '#tab1') {
      console.log('first table adjustment');
      $('#tab1table').DataTable().columns.adjust().responsive.recalc();
  
      secondAdjustment = setInterval(function () {
        console.log('second table adjustment');
         $('#tab1table').DataTable().columns.adjust().responsive.recalc();
            clearInterval(secondAdjustment);
         }, 2000);
       }
  });
  
• allan Posts: 61,650Questions: 1Answers: 10,094 Site admin

  May 2019

  It certainly looks like Responsive is the code at fault here. Without Responsive it works as expected.

  I'm afraid I don't have an immediate answer for this, but I've filed a bug for this to be looked at before the next release of Responsive.

  Thanks,
  Allan
• allan Posts: 61,650Questions: 1Answers: 10,094 Site admin

  August 2019

  I've just been working with the JSFiddle to try and figure this out - basically what is happening is a result of the scrolling being enabled on the host table. If you do columns.adjust() first the recalc the Responsive display, the hidden elements for the scrolling body are not hidden. They are only hidden on a table scrolling redraw - which we want to avoid here. They are what are causing the alignment issue.

  The answer, in the short term, is to use responsive.recalc() before columns.adjust() - i.e.:

  $('#tab1table').DataTable()
    .responsive.recalc()
    .columns.adjust();
  

  https://jsfiddle.net/5uc71gmv/

  Its a bit redundant, but because DataTables doesn't trigger a pre-column-sizing event, its about as good as we've got at the moment. I could add that event into DataTables core, but with DT2 I want to revisit the whole automatic sizing and adjustment, so with this workaround for the short term, I'll instead move the focus of this issue to v2.

  Allan