Column alignment with ScrollY

Column alignment with ScrollY

FreedyFreedy Posts: 33Questions: 5Answers: 0

Hi,

I have a table which works perfect until I use scrollY, I've tried using columns.adjust()
with no luck. Any suggestions?

Thnx!

Replies

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited April 2018

    It works good here:
    https://datatables.net/examples/basic_init/scroll_x.html

    The problem is likely specific to your environment. Maybe you can post a link to your page or a test case showing the issue:
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • FreedyFreedy Posts: 33Questions: 5Answers: 0

    Hi Kevin,
    But I'm using scrollY not scrollX.

    -Thomas

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Sorry, this example of scrollY works:
    https://datatables.net/examples/basic_init/scroll_y.html

    Again, something in your environment, CSS conflict or CSS missing, is causing the issue. Can you post a link showing the issue?

    Kevin

  • JigarJigar Posts: 2Questions: 1Answers: 0

    Many people actively suggested solutions around the issue with column alignment while using ScrollY. I struggled a lot to resolve this because in my case, the datatable is inside a container div whose width changes as the adjacent container expands or contracts.

    I got a work around by setting the scrollHeadInner.width the same as ScrollBody.width using Jquery. Below is my function. I used setTimeout to delay as my container took around 600-700ms to fully expand

    function adjustTableCol() {
            //Workaround to adjust datatable column alignment
            setTimeout(function(){
                var currentScrollBodyWidth = $(".dataTables_scrollBody .table").width();
                    $(".dataTables_scrollHeadInner .table").width(currentScrollBodyWidth);
            },1000);
        }
    
This discussion has been closed.