Fixed Columns. move left

Fixed Columns. move left

pakaymcpakaymc Posts: 6Questions: 2Answers: 0

https://www.lakeis.org/Stats_Scores_Winter.php

My datatable has 60 columns with the first 4 fixed. When I scroll left at the 31st column the left fixed columns move left. How do I prevent the movement and keep the columns fixed at all times.
NOTE: The top fixed columns do not move.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 22,438Questions: 26Answers: 5,161

    Looks like you are loading Bootstrap 3 but using the Datatables default styling includes.

    jQuery 3.7.0, DataTables 2.2.2, Buttons 3.2.2, HTML5 export 3.2.2, Print view 3.2.2, FixedColumns 5.0.4, FixedHeader 4.0.1

    Use the Download Builder to get the proper Datatables BS3 style integration files. See the Styling docs for more details.

    Also note that you are loading jquery.js three times; once at line 37, then line 39 and in the concatenated Datatables .js and .css. jQuery should only be loaded once otherwise you may have operational issues with the .js compenents attaching to different jquery.js instances.

    Try thse changes and let us know the results.

    Kevin

  • allanallan Posts: 65,653Questions: 1Answers: 10,919 Site admin
    Answer ✓

    It took me quite a while to figure out why I couldn't see a scroll bar on the page for the horizontal scroll. You have height: 772px; on the first div element in the page, chopping off the bottom of the page for me.

    You also have this on the table that I would very strongly suggest you remove:

         style="position: relative;
                     top:      0px;
                   width:     100%;
                  height:      99%;
                 display:    block;
            table-layout:     auto; "
    

    display: block for the table is not supported by DataTables.

    Furthermore your HTML isn't valid HTML in that the colspan's don't line up. The first header row is two cells of 4 and 63 colspan, while the second header row is 4 and 62. Third header row appears to be 66 cells, while the table body rows have 67.

    Correct those points and hopefully it should work.

    Allan

  • pakaymcpakaymc Posts: 6Questions: 2Answers: 0

    Thank you Allen, removing the Style="" from the table corrected the problem.

    Your comments are vry helpful.
    Thank you.
    Michael

  • pakaymcpakaymc Posts: 6Questions: 2Answers: 0

    Thank you for all the help. I made a lot of changes and all is working as expected.

  • allanallan Posts: 65,653Questions: 1Answers: 10,919 Site admin

    Good stuff - thanks for letting me know.

    Allan

Sign In or Register to comment.