Horzontal Scroll not working like the example.

Horzontal Scroll not working like the example.

SjoerdHekkingSjoerdHekking Posts: 6Questions: 1Answers: 1

Link to test case:
Image of the problem
Sadly the upload image, file etc. don't seem to work.

Description of problem:

script(type="text/javascript").
    $(document).ready( function () {
        var options = {
            scrollHorizontal: true,
            uniqueFilterText: true,
            selectColumns: [1,3,4,5,6,7,8,15,16,17,18,19],
            responsive: false,
        }
        tableFormatter('#viewuserTable', options);
    });

This is my JavaScript, it works nicely, however, scrollHorizontal won't work. I did exactly as the example in basic said.

My HTML (pug):

div#testid(style="width:100%;max-width:100%;")
        table#viewuserTable.display.nowrap(style="width:100%;")
            thead
                tr
                    th ID:
                    th Gebruiker: 
                    th Level: 
            tbody
                for test in data
                    tr
                        td= test.id
                        td= test.name
                        td= test.level
            tfoot
                tr
                    th ID:
                    th Gebruiker: 
                    th Level: 

And here my CSS:

#testid .dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}

#testid th, #testid td { white-space: nowrap; }

To keep it more clean, I only show you how 3 columns are made, but it's actually 20~. What Did I do wrong?

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    scrollHorizontal and all the other options with the exception of responsive are not options that are used in DataTables. Our horizontal scrolling option is scrollX.

    Are you using some abstraction library that uses DataTables underneath, or perhaps even something other than DataTables?

    I think we'd need a link to a page showing the issue to be able to debug this.

    Allan

  • SjoerdHekkingSjoerdHekking Posts: 6Questions: 1Answers: 1

    Are you using some abstraction library that uses DataTables underneath, or perhaps even something other than DataTables?

    I am not using anything else, let me explain:

    function tableFormatter(id, options) {
        var table = $(id).DataTable({
            "pagingType": "input",
            responsive: options.responsive,
            scrollCollapse: true,
            language: {
                url: '/scripts/DataTables/dutch.json'
            },
            scrollX: options.scrollHorizontal,
            order: [[options.startSort, 'desc']]
        });
    

    As you can see, I feed it my own options so I don't have to create huge inline js.

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

    In the image it looks like you have both responsive and scrollX enabled. Responsive will hide columns that don't fit in the container. ScrollX allows for scrolling when the table doesn't fit the container. It seems like you are trying to competing options to keep the table in the container. You should choose one or the other option.

    If you still need help please post a link to your page or a test case replicating the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • SjoerdHekkingSjoerdHekking Posts: 6Questions: 1Answers: 1

    Thanks for your response Kevin. I will upload a live version later on! Responsive is set to false, so it can't be that.

    @kthorngren @allan

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

    Responsive is set to false, so it can't be that.

    Are you using Child Detail Rows instead? You have the green plus sign which suggests that you have responsive enabled or are using Child Detail Rows.

    Are all of your columns showing?

    What happens when you click the green plus sign?

    Kevin

  • SjoerdHekkingSjoerdHekking Posts: 6Questions: 1Answers: 1

    There we go!

    I pasted this 1:1, including my not refactored code and bad code. As one can see, it's working in the example... now I am puzzled...

    @kthorngren @allan

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    Yep, we are too :smile: Maybe try commenting out this line:

    responsive: options.responsive,
    

    Or setting it to false.

    Something is enabling responsive but its not clear from your test case and code snippets what it might be.

    Kevin

  • SjoerdHekkingSjoerdHekking Posts: 6Questions: 1Answers: 1
    edited August 2022 Answer ✓

    I fixed it... Guess that this was a silly move...! I now compare it to undefined.

    var responsive = false;
    
    if (!(responsive)) {
      responsive = true;
    }
    

    Thanks for helping me <3
    @kthorngren @allan

  • SjoerdHekkingSjoerdHekking Posts: 6Questions: 1Answers: 1
    • the live version doesn't have the library responsive enabled, so hence I indeed knew there must've been something wrong!
Sign In or Register to comment.