scrollX causes unnecessary scrolling

zaunkoenig

https://jsfiddle.net/7sktr41a/

Hello,
I'm finding that using scrollX often results in a horizontal scrollbar even when it's not needed, resulting in the last column being 'truncated'.

If you remove the scrollX:true in the example, then the table renders ok without scrolling. In my local usage I'm finding this only happens in Chrome browsers, seems to render fine in Firefox.

allan

Hi,

I actually think that the current rendering is okay. What is happening is that DataTables attempts to figure out a "worst case" table (i.e. the headers + the longest string from each column). It measures the column widths for that table and then applies it to the host table. The idea is that it will stop column widths from changing when the page is changed.

This can be seen in your example, with scrollX enabled, changing pages doesn't change the column width. However, if it is disabled, the columns are just a little too narrow to allow for the worst case table, so the column widths do change between pages.

I'm happy that this is working as I would expect it to at the moment.

Allan

zaunkoenig

Hi Allan,

I really appreciate your respond. I should have also mentioned that the reason I brought this up was that the rendering is different to version 1.13.11. Our team only recently completed the move to DT V2 and only just noticed this new rendering, which in our use case means the sorting arrows are 'missing' from the last column, because of the scrolling.

Maybe it's better to use a non-paginated table an an example. In this case there is also enough space for the table to render without horizontal scrollbar, but scrollx adds it nonetheless.

https://jsfiddle.net/15rjca27/

Again, thanks for taking time to look at this.

allan

Thanks for the link. Column widths (particularly with scrolling enabled) are easily the most complex part of DataTables. I've probably not got it bullet proof yet, but I think that example shows why scrollX adds scrolling - the table is overflowing the container (the container ends on the right alignment of the search box:

The column sizing in DT2 is a lot more robust, which is why you'll see a difference between 1 and 2.

Allan

ahmeti

Hi Everyone,
To be honest, I suffer from the same problem. I spent 1-2 hours on the source code and realized that it was caused by "colgroup".

Frankly, I don't want to go back to v1. For now, I found a temporary solution for v2 and it behaves like version 1.

I didn't test the code enough!

Thanks,
Ahmet

https://jsfiddle.net/x52umvjd/

$('#example').DataTable({
    scrollX: true,
    preDrawCallback: function (data) {
        data.nTableWrapper.querySelectorAll('colgroup').forEach((e) => e.remove());
    }
})

allan

Hi Ahmet,

Thanks for the feedback and test case. The test case shows what I was trying (perhaps not very well?) to explain in my first reply in this thread. The column widths change when you change page in your table. That happens because the table content doesn't fit cleanly into the space available.

That shifting in column width might be acceptable in your UI, but it isn't something I like, and I think that the current behaviour is correct.

That said, I'm glad to hear you have a workaround to suit your needs!

Allan

klymov.inekon

Hi. Same problem for me. I have a lot of empty space, but it add some pixels and now I have a scroll.

allan

@klymov.inekon As per the others - please link to a test case so I can look into it and understand what is happening. I've explained why the two examples above are overflowing slightly, and I'd be interested in looking to see why your own is - particularly as you appear to have only one page of data there.

Allan