Answers

• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  December 2020

  Looks like you need to add style="width:100%" to the table tag as shown in this example. See if this fixes the problem for table 2 in this updated example:
  https://stackblitz.com/edit/datatables-columns-adjust-issue-rdk51s?file=index.html

  Kevin
• nivle Posts: 23Questions: 2Answers: 0

  December 2020 edited December 2020

  @kthorngren it didn't fix anything, besides that, the issue is on both tables, they both already have width 100 as set by bootstrap class w-100, so I don't see, why you would think the issue would be solved by adding style="width:100%". On the first table I call the columns.adjust 3 times, with a timeout of 1 second between each, so you can see the change on the table after each call. Normally the columns should be fixed with one call already.
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  December 2020 edited December 2020

  Seems like there is a timing issue. If I remove this code:

  //$("#table1-container").addClass("d-flex");
      //setTimeout(() => {table1.columns.adjust();}, 1000 );
      //setTimeout(() => {table1.columns.adjust();}, 2000 );
      //setTimeout(() => {table1.columns.adjust();}, 3000 );
      // in this case calling it multiple times fixes it, but in some cases even that doesn't work...
  

  And add this init event the columns.adjust() seems to work:

  $("#table1").on('init.dt', function () {
    $("#table1-container").addClass("d-flex");
    $('#table1').DataTable().columns.adjust();
  });
  
  

  https://stackblitz.com/edit/datatables-columns-adjust-issue-rdk51s?file=index.html

  I'll let you test further Let us know.

  Kevin
• nivle Posts: 23Questions: 2Answers: 0

  December 2020

  @kthorngren nope, nothing changed, the issue is still there, being the same as calling columns.adjust() one time on the table. You can see the issue by making the app screen bigger, then its easier to see.
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  December 2020

  Interesting. It seems there is an interaction issue with Flexbox. I'm not familiar with flexbox but I made a change to use a settimeout in the init event I created. This shows that the container the table is in grows when columns.adjust() is called. Seems flexbox adjusts after the columns.adjust() is called.

  Maybe @allan or @colin can help with how to make this work with flexbox. The problem doesn't seem to be there if the scrolling features are turned off.

  Kevin
• nivle Posts: 23Questions: 2Answers: 0

  December 2020

  Yes, help me @allan @colin
• nivle Posts: 23Questions: 2Answers: 0

  December 2020

  Yes, help me @allan @colin
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  December 2020

  Sorry I've not had a chance to do a deep dive into this yet. It isn't immediately clear what is going wrong, so I'll try to make some time for it next week.

  Allan
• nivle Posts: 23Questions: 2Answers: 0

  December 2020

  
• nivle Posts: 23Questions: 2Answers: 0

  January 2021 edited January 2021

  @kthorngren It seems the issue is caused by the bootstrap class "flex-md-row" on one parent div containing the table element???, after removing this class, the columns.adjust works after calling it once. Any idea why this is the case?
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2021

  Like I said I'm not familiar with Flexbox but it sounds like flex-md-row is a responsive class. It looks like when using columns.adjust() the flexbox responsive class takes affect and adjusts the container after the columns.adjust(). They are competing functions to adjust the view. The more times you use columns.adjust() the more times the flex-md-row class runs. Eventually you get to a point where they meet - I guess its three times :-)

  Kevin
• nivle Posts: 23Questions: 2Answers: 0

  January 2021

  @kthorngren Ok, I solved the issue, by wrapping the whole buttons section with another div, not sure why, but it works
• nivle Posts: 23Questions: 2Answers: 0

  February 2021

  @kthorngren However, if responsive is active, I do have to call columns.adjust() twice, any idea why that is?
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  February 2021

  As I mentioned previously my thought is that you have two competing responsive. functions. When you use columns.adjust() then the flexbox adjusts. So you need to call it again. Finally they come to adjust to the same width.

  Kevin