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

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

imc123imc123 Posts: 1Questions: 1Answers: 0
edited February 3 in Free community support

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

Answers

  • kthorngrenkthorngren Posts: 21,802Questions: 26Answers: 5,043

    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_PearceHuw_Pearce Posts: 8Questions: 2Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,802Questions: 26Answers: 5,043

    @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_PearceHuw_Pearce Posts: 8Questions: 2Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,802Questions: 26Answers: 5,043

    @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_PearceHuw_Pearce Posts: 8Questions: 2Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,802Questions: 26Answers: 5,043

    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

  • mic97mic97 Posts: 1Questions: 0Answers: 0

    Hi Kevin,

    still working incorrectly.

  • allanallan Posts: 64,150Questions: 1Answers: 10,584 Site admin

    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

  • kthorngrenkthorngren Posts: 21,802Questions: 26Answers: 5,043
    edited 10:51AM

    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

  • allanallan Posts: 64,150Questions: 1Answers: 10,584 Site admin

    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

Sign In or Register to comment.