Scrollbar styling causing DataTables to behave funny if inside a flex container

Mario#

Hi everyone!
First of all I wanted to thank all of you for this amazing plugin.
That said, I encounter a problem using it.
I notice that if used inside a flex container the datatables behave in a funny way: it's width becames bigger and bigger on every resize of the screen or, in my specific case, scrolling the body (I'm using the scroller plugin).

In the fiddle linked below I reproduce the problem. As you can notice the problem disappear if you remove the styling of the scrollbar.

Link to test case: https://jsfiddle.net/0wgsdacx/7/

I'm missing something or it is a bug?

Thank you!

Mario

allan

Hi Mario,

When DataTables starts up, it determines the width of the scrollbars used on the page using the code here. However, when writing that code, I made an assumption - that all scrollbars on the page would be the same width.

So if you apply your custom styling to all scrollbars on the page:

*::-webkit-scrollbar {
    width: 11px;
}

.*::-webkit-scrollbar-track {
    background: #e9e9ea;
    border-radius: 6px;
}
 
*::-webkit-scrollbar-thumb {
    background-color: #D3D3D3;
    border-radius: 6px;
}

* {
    scrollbar-color: #D3D3D3 #e9e9ea;
    scrollbar-width: thin
}

then it works as expected: https://jsfiddle.net/CloudTables/jsy70v3k/1/

Allan

Mario#

Hi Allan,

silly me, didn't try this way. Good to know that!

Thank you so much for your answer.

Mario