Fixed Header is not aligning correctly vertically on scroll in small screens

imc123

Description of problem: Fixed Header is not aligning correctly vertically on scroll in small screens

kthorngren

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

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

@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

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

@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

Huw_Pearce

Hi Kevin,
Apologies for not responding sooner.
Thank you for the feedback, much it is much appreciated.

Question - if each table has a unique id, how does DataTables work on tables that I want sorting and responsive actions to work on? Do I have to create the code for each unique table id?

Kind regards,
Huw

kthorngren

Datatables creates an API instance for each table. They operate independently. You can use the tables() API to select the appropriate table if you need to use the API.

Kevin

mic97

Hi Kevin,

still working incorrectly.

allan

I don't appear to have a problem with it here:

What browser and OS are you using? And what is the width of the view port for the "Output" in your screenshot?

Is it Kevin's test case you are using for that screenshot, or something else? The headers appear different?

Allan

kthorngren

Use my test case:
https://live.datatables.net/rukorose/1/edit

I removed the added colgroup from the first and second table but left it on the third. Thought that resolved the issue but when scrolling past the header of the second table it becomes unaligned:

Scroll past that to the third table with defined colgroup and its worse.

This is on a Mac with Chrome Version 134.0.6998.89 (Official Build) (arm64). I think you need to have a small container to see the issue.

Kevin

allan

I see it now - many thanks for the clarification Kevin. It looks like the last table is struggling as well. I'll take a dig into it.

Allan