scrollX does not work

scrollX does not work

gib65gib65 Posts: 29Questions: 13Answers: 0

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]

Answers

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

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

    Kevin

  • proghrammerproghrammer Posts: 1Questions: 0Answers: 0

    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.

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

    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

  • StanAccyStanAccy Posts: 31Questions: 5Answers: 0
    edited 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.

  • StanAccyStanAccy Posts: 31Questions: 5Answers: 0
    edited 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.

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

    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

  • StanAccyStanAccy Posts: 31Questions: 5Answers: 0
    edited 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.

  • Arthur09Arthur09 Posts: 1Questions: 0Answers: 0

    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?

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

    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

  • ShrutiGuptaShrutiGupta Posts: 1Questions: 0Answers: 0
    edited 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.

  • sanjay123sanjay123 Posts: 2Questions: 0Answers: 0
    edited September 2018

    yes

  • tekknowtekknow Posts: 13Questions: 2Answers: 0

    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.

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

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

    Kevin

  • cneumanncneumann Posts: 1Questions: 0Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • RadicaRadica Posts: 3Questions: 0Answers: 0

    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

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

    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

  • RadicaRadica Posts: 3Questions: 0Answers: 0

    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).

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

    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

  • RadicaRadica Posts: 3Questions: 0Answers: 0

    Eg. this

This discussion has been closed.