Answers

• kthorngren Posts: 21,779Questions: 26Answers: 5,038

  February 3

  This example seems to work correctly on an iPhone. Make sure you have all the correct JS and CSS files for the style framework being used. Use the Download Builder for this.

  If you still need help please provide a link to a test case replicating the issue so it can be debugged.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• Huw_Pearce Posts: 7Questions: 2Answers: 0

  March 7

  Hi Kevin,

  I have something that seems the same issue.

  This is my web page https://sailwave.com/results/huw/Sailwave-DataTables-ExperimentV08.htm.

  I look forward to any pointers for resolving the issue.

  PS - you kindly helped point me in the right direction with other issues on the aforementioned page, which were much appreciated.

  Kind regards,
  Huw
• kthorngren Posts: 21,779Questions: 26Answers: 5,038

  March 7

  @Huw_Pearce

  I copied the relevant parts of your code into this test case so I could experiment.
  https://live.datatables.net/rukorose/1/edit

  It looks like you have defined colgroup for each table. Datatables also defines colgroup to help handle column widths correctly. I don't know all the details of how this works.

  In the test case I removed the colgroup from the first two tables. Scroll through the first two tables and you will see when the fixHeader is applied the header width stays the correct width. However when the FixedHeader is applied to the third table the column width is incorrect. Inspecting the header you will see two colspan elements; The first is created by Datatables and the second is yours with the style attribute added. For example:

  <colgroup>
     <col data-dt-column="0" style="width: 74.4688px;">
     <col data-dt-column="1" style="width: 72.8594px;">
     <col data-dt-column="2" style="width: 63.0078px;">
     <col data-dt-column="3" style="width: 64.0469px;">
     <col data-dt-column="4" style="width: 89.4062px;">
     <col data-dt-column="5" style="width: 93.375px;">
     <col data-dt-column="6" style="width: 103.141px;">
     <col data-dt-column="7" style="width: 102.578px;">
     <col data-dt-column="5" style="width: 17px;">
     <col data-dt-column="6" style="width: 17px;">
     <col data-dt-column="7" style="width: 17px;">
  </colgroup>
  
  <colgroup span="17">
     <col class="rank" style="width: 17px;">
     <col class="fleet" style="width: 17px;">
     <col class="nat" style="width: 17px;">
     <col class="sailno" style="width: 17px;">
     <col class="boat" style="width: 17px;">
     <col class="division" style="width: 17px;">
     <col class="helmname">
     <col class="crewname">
     <col class="race">
     <col class="race">
     <col class="race">
     <col class="race">
     <col class="race">
     <col class="carriedfwd">
     <col class="penalties">
     <col class="total">
     <col class="nett">
     <col data-dt-column="5" style="width: 93.375px;">
     <col data-dt-column="6" style="width: 120.852px;">
     <col data-dt-column="7" style="width: 106.961px;">
  </colgroup>
  

  It seems these are conflicting. I'm not sure if you are using colgroup for anything in your solution. If not removing them might resolve the issue. @allan will need to look to debug further.

  Kevin
• Huw_Pearce Posts: 7Questions: 2Answers: 0

  March 7

  Hi Kevin,
  Thank you for your prompt answer and pointer to where there is conflict in my code.

  I will go and look at my code with your insight.

  Thank you very much.

  Kind regards,
  Huw
• kthorngren Posts: 21,779Questions: 26Answers: 5,038

  March 7

  @Huw_Pearce I forgot to mention a couple other issues I found. First is you have the same id for each table: id="summarytable. The id attribute is expected to be unique on the page. One option is to add a digit to each id to make them unique, for example: id="summarytable1.

  Second is this statement on line 42 is missing a close quote after .css:

  <link href="https://cdn.datatables.net/plug-ins/2.1.8/features/orderNumbers/dist/dataTables.orderNumbers.min.css rel="stylesheet">
  

  That CSS is not being loaded. It should look like this:

  <link href="https://cdn.datatables.net/plug-ins/2.1.8/features/orderNumbers/dist/dataTables.orderNumbers.min.css" rel="stylesheet">
  

  Kevin