Horzontal Scroll not working like the example.

SjoerdHekking

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?

allan

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

SjoerdHekking

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.

kthorngren

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

SjoerdHekking

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

kthorngren

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

SjoerdHekking

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

kthorngren

Yep, we are too 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

SjoerdHekking

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
@kthorngren @allan

SjoerdHekking

• the live version doesn't have the library responsive enabled, so hence I indeed knew there must've been something wrong!