Answers

• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  May 2020

  Sounds like you have the problem described in this thread. If this thread and the linked threads don't help then please build a test case replicating the issue. Otherwise it will be hard to say why you are having the extra scrollbar under the FixedColumns.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  My guess is trying to fix the width isn't going to solve the problem. Sounds like it might be something else.

  Kevin
• JuJoGuAl Posts: 32Questions: 2Answers: 0

  May 2020

  Seems like y problem (i have a table with DYNAMIC columns) so when the page Load, Sorting or Filtering the Columns withs Breaks (scrollX: true, scrollY: '70vh', scrollCollapse: true) and i cant fix it!

  https://datatables.net/forums/discussion/62307/after-sorting-columns-width-breaks-using-scroll
• Karl53 Posts: 72Questions: 29Answers: 0

  May 2020

  I believe I have resolved my problem. It has nothing to do with fixed columns. My table's data source is a JavaScript array of arrays. The table is on a Bootstrap v4 tab control and the DataTable is initialized while the tab is hidden. I was calling rows().invalidate() in the tab's event handler. This was resetting the width I had assigned to the column. I made a few changes, but what I think fixed the problem was adding 'autoWidth': true to the DataTables initialization object. I also removed the width:100% on the table element.
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  May 2020 edited May 2020

  The default for autoWidth is true. Unless you had it set false it might not be helping. However if you are using tabs then you will want to use columns.adjust(), as shown in this example to recalculate the column width when the tab is shown.

  I also removed the width:100% on the table element.

  This is how Datatables is able to calculate the width of the table. Likely you will want to put it back, especially if you use columns.adjust().

  Kevin
• JuJoGuAl Posts: 32Questions: 2Answers: 0

  May 2020

  Well @Karl53 Firts im using ASP table (GridView) so the code is:

  <div class="card-body">
      <div class="row">
          <div class="col-12">
              <div class="table-responsive">
                  <asp:GridView ID="ID" ClientIDMode="Static" runat="server" AutoGenerateColumns="false" ShowHeader="true" ShowFooter="false" CssClass="table table-bordered table-hover" ShowHeaderWhenEmpty="true">
                  </asp:GridView>
              </div>
          </div>        
      </div>
  </div>
  

  dataTable opciones (ordering,filtering, buttons) and

      scrollX: true,
              scrollY: '70vh',
              scrollCollapse: true,
              autoWidth: true,
  

  in options i set the initComplete to adjust the columns (always on the page load the table seens broken)

  initComplete: function () {
      jQuery(jQuery.fn.dataTable.tables(true)).DataTable().columns.adjust().draw();
  
  },
  

  Second, i have two grids for example:

  Grid A: with 24 Columns - n Rows

  

  after filtering

  

  Grid B: 13 Columns - n Rows

  

  after filtering

  

  

  Grid B Breaks to when use sorting

  So exactly i dont know how to fix it!
• colin Posts: 15,177Questions: 1Answers: 2,590

  May 2020

  We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  Cheers,

  Colin
• Karl53 Posts: 72Questions: 29Answers: 0

  May 2020 edited May 2020

  @kthorngren I previously had had autoWidth set to false, and I was already calling columns.adjust().

  So it seems a call to rows().invalidate() can cause columns to resize, and for the DataTable to use a column's explicitly set width, init autoWidth needs to be set to true and the table element should have its width attribute set. Do I understand the requirements correctly?

  After testing above: I just added back the table width:100% and that breaks the layout. The only explicitly sized column (the FixedColumn) is too narrow. There is now an extra horizontal scrollbar below the FixedColumn. If I removing table width:100%, the column is sized properly. I'm good with this, but I thought I would mention it.
• JuJoGuAl Posts: 32Questions: 2Answers: 0

  May 2020

  @colin this is the test case, http://live.datatables.net/hobukaxu/3/edit but the BUG (in the test case) only happen when you filtering de table, but in my workspace, the bug happend when the table load (somethimes) when sorting (most of the time) when Filtering (most of the time)
• colin Posts: 15,177Questions: 1Answers: 2,590

  May 2020

  @JuJoGuAl I just tried that test case and couldn't reproduce the issue. Please can you provide steps on how to do so.

  Colin
• JuJoGuAl Posts: 32Questions: 2Answers: 0

  May 2020

  @colin I use the Link, Turn Off (html,css,javascript) only Show output, then i wrote 1 2 3 then i delete then (in the filtering box) and the columns Breaks (size)

  

  Like i said in the test case only happens when filtering data, but in the development case happens when the table load (page load) (sometimes), when sorting data (sometimes), when filtering data (most of the time)
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  May 2020

  Initially a saw a boat in the preview, then refresh and see nothing. So I'm afraid I'm also unsure of how to use your test case to see the problem.

  The issue you are seeing can be caused by using border-collapse: collapse on the table. Use the debugger to found out if that is the issue here - it has a suite of tests to find and report common errors).

  Allan