scrollX does not work

gib65 · March 2017

Hello,

I'm experimenting with DataTable and I'm trying the scrollX example here:

https://datatables.net/reference/option/scrollX

I have attached before and after pics of my table. "scrollX doesn't work.png" shows the issue.

Here's my code:

[code]
$(document).ready(function() {
$('#table_id').DataTable({
paging: false,
scrollY: 100,
scrollX: true
});
[/code]

kthorngren · March 2017

Your basic example works fine. Please post a link to your code for further review.

Kevin

proghrammer · April 2017

Hi,
This is not working for me either. Even in the JSFiddle you can see that ScrollX:true is not showing the horizontal scroll bar.
https://datatables.net/reference/option/scrollX
Please help.

kthorngren · April 2017

I placed the above code in a test case.
http://live.datatables.net/reraheso/1/edit

Looks like it works for me. Do you have width="100%" applied to your table in HTML?

I may be missing it but is there a JSFiddle link showing the problem?

Kevin

StanAccy · May 2017

Im having the exact same issue with a DT, latest JS. On large tables that require the scroll, everything works fine. With a table with only 3 cols, the tbody is centered on screen, and the thead is left aligned to the browser window (same as shown in .png the OP attached)

    $myTable.DataTable({
            data     : rows,
            columns  : cols,
            rowId    : 'id',
            bPaginate: false,
            //scrollX       : "100%",
            scrollY  : "68vh",
            //scrollCollapse: true,
            rowGroup    : {
                dataSrc: 'pkText'
            })};

With the scrollX property uncommented I get the behavior as described. Ive attached a pic of the generated HTML with the scrollX property enabled. Same behavior if I remove all our app / page .css imports. Removing rowGrouping has no impact.

StanAccy · May 2017

I see a difference in the HTML: The _scrollHead has a style on the table of margin-left: 0px; The Table inside the _scrollBody has no such inline style, and instead has an effective margin-left of 'auto' (updated with screenshot of HTML elements)

The following CSS brings the headers and body into alignment, but the search/filter box is way over on the right hand side.

.dataTables_scrollBody table {
    margin-left:0px;
}

I wrapped the datatable <table> in a <div> and set that div to:

display:inline-block;

This fixed the alignment of the headers, body and the search/filter box.

kthorngren · May 2017

You didn't mention if you have width="100%" configured for your table. I adjusted the above test case to have 3 columns and removed the width="100%" from the table. The table looks like the png from the OP and what you described.

http://live.datatables.net/reraheso/3/edit

When width="100%" is added to the table tag the table will be displayed as expected. Did you try this?

Kevin

StanAccy · May 2017

I did not have width set on the <table> . With that set, and without the inline-block on the container div, I get the same odd behavior. Removing width and without the inline-block on the container I get the same offset behavior. The only thing Ive tried so far that forces the header and body to align as well as aligning the search/filter bar to be over the top right corner of the table headers is the inline-block on the container div.

I will add that the width setting I add on the element is overiden by the JS - whatever I set on the <table> is replaced with width:523px; as an inline style

Pulling the <table> out of the container <div> and putting it directly under <body> has a significant impact here.

Arthur09 · April 2018

Removing paging and scrollY and leaving scrollX works.

Something odd is happening when you mix these three commands

I tried removing the width=100% and using a simple basic code and I still can't use ScrollX with ScrollY together for some reason

Does someone know how to use these three commands together? Could you add a sample code for it?

allan · April 2018

If you link to a test case showing the issue I can take a look. Kevin has already posted links to examples showing it working above.

Allan

ShrutiGupta · July 2018

Yes sometimes other options prevent scrollX from working. You can try adding responsive: true, this would add a + sign which would drop down the hidden columns.

sanjay123 · September 2018

yes

tekknow · December 2018

I'm also seeing problems with scrollX. I tried all the above suggestions and nothing worked. The header gets scrunched up and no longer aligns with the table columns when scrollX:true is present, nor is there a horizontal scrollbar. Mine is inside a jquery layout so maybe there is a conflict with that somewhere. Kevin's example works fine though.

kthorngren · December 2018

Without a test case replicating the issue or a link to your page it would be hard to diagnose.

Kevin

cneumann · March 2019

Have the same problem:
http://live.datatables.net/fafayigu/1/edit
It works with the workaround sScrollXInner: "100%", which is not documentet.

colin · March 2019

Hi @cneumann ,

It's because the table isn't filling the whole container - if you make the width 100% as shown here, it all works as expected. And yep, xScrollXInner isn't document intentionally - see here.

Cheers,

Colin

Radica · March 2020

I'am afraid, enabling scroll-X often doesn't work as expected. In my table header row is somehow squeezed, only the bottom half is visible. I solved responsiveness with a simple solution.
Added
overflow-x: auto;
to
.dataTables_wrapper
(Why not to include it by default?)
Also, to avoid scrolling of search input and table info to the left, added
position: sticky;
left: 0;
to
.dataTables_filter
and
.dataTables_info

allan · March 2020

overflow-x: auto;

This doesn't work with vertical scrolling unfortunately. The header would scroll off if you have vertical scrolling.

position: sticky;

Is one option. But isn't supported by enough browsers for us to use it by default.

Allan

Radica · March 2020

Hi Allan,
Thank you for your reply. I checked the scroll with overflow-x: auto; added, and it works. But, the header of my table is hidden (in Chrome, Opera, Firefox) and sorting does not work. Maybe, it is something on css, not sure. Anyway, thank you for the great work you are doing here. I wander if you are aware of the commercial versions of datatables (cloned as I can see).

allan · March 2020

I wander if you are aware of the commercial versions of datatables (cloned as I can see).

Nope... It is under the MIT license so it can be distributed in a commercial software package, but it must retain the original copyright. What package are you referring to?

I checked the scroll with overflow-x: auto; added, and it works. But, the header of my table is hidden (in Chrome, Opera, Firefox) and sorting does not work.

Yes - that's why we had to go down the route of offering the scrollY option.

I an considering removing that for v2, and instead expanding FixedHeader to work in a scrolling container. It will fix a lot of issues with alignment and performance, but at the cost of upgrade complexity and the scrollbar extending over the header and footer - not just the table body...

Allan

Radica · April 2020

Eg. this

scrollX does not work

scrollX does not work

Answers

Howdy, Stranger!

Categories

DataTables

scrollX does not work

scrollX does not work

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables