Answers

• allan Posts: 65,421Questions: 1Answers: 10,864 Site admin

  December 19

  Unfortunately no, there isn't an option to have it not wrap the content in a span at the moment. The idea there was to introduce a semantically neutral element to allow layout control for things like the ordering icons and ColumnControl.

  Does it actually cause any rendering issues, or is it just a strict HTML error? I could possibly make the span a div, or add an option for that, but it is already a child of a div (used as the flex container), so span was the obvious choice.

  Allan
• kthorngren Posts: 22,368Questions: 26Answers: 5,138

  December 19

  Without seeing a test case with the issue it's hard to say. I copied your code into this test case:
  https://live.datatables.net/bunisiqu/1/edit

  I did get this error:

  dataTables.js:2092 Uncaught TypeError: Cannot read properties of undefined (reading 'sClass')

  The problem with the code above is there are three columns in the top header but four in the bottom. Removing the last column in the second header fixes the issue. Not sure if that is the same issue for you. If not please update the test case to show the issue you are having. Or provide a link to a test case showing the issue.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• craigh Posts: 14Questions: 5Answers: 0

  December 19

  @kthorngren your test case is accurate but as I said above, I am using tom-select on the <select> element. This js lib adds a <div> element after the <select>. When dt wraps the contents of the <td> you now get something like

  <td data-dt-column="1" rowspan="1" colspan="1" class="dt-orderable-asc dt-orderable-desc">
      <div class="dt-column-header">
          <span class="dt-column-title">
              <select></select>
              <div class="ts-wrapper form-select form-select-sm datatable-column-filter datatable-multiple-select-filter multi plugin-checkbox_options plugin-remove_button plugin-limit_display"><div class="ts-control"><input type="text" autocomplete="off" size="1" tabindex="0" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="dt-column-0-filter-ts-dropdown" id="dt-column-0-filter-ts-control" aria-labelledby="dt-column-0-filter-ts-label" placeholder="Any"></div></div>
          </span>
          <span class="dt-column-order" role="button" aria-label="col2: Activate to sort" tabindex="0"></span>
      </div>
  </td>
  

  note the injected <div> after the <select>

  This is invalid HTML - a div inside a span.

  I can't figure out how to add the tom-select lib to your test case generator, so I cannot provide the exact situation.

  @allan it renders fine. The problem is meeting .gov standards for html in my client's use case.
• craigh Posts: 14Questions: 5Answers: 0

  December 19

  https://live.datatables.net/bunisiqu/2/edit?html,css,js,output

  here is a test case. you have to inspect the html around the select element to see the problem.
• allan Posts: 65,421Questions: 1Answers: 10,864 Site admin

  December 19 Answer ✓

  I think the only realistic way to address this is to change the span to be a div. I can't do that for DataTables 2.x, but I'm willing to consider that change for DT3, which I'm working on at the moment. That said, it could be an optional parameter for DT2. Would that resolve the issue for you?

  Allan
• craigh Posts: 14Questions: 5Answers: 0

  December 19

  @allan I think optional would solve it for me, yes. thanks!
• allan Posts: 65,421Questions: 1Answers: 10,864 Site admin

  December 19

  I'll aim to get that implemented on Monday. Also aiming to make a release for DT on Monday, so it should be a quick turn around

  Allan