DataTables logo
≡

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

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

Mario#Mario# Posts: 7Questions: 3Answers: 0
in Free community support

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 65,813Questions: 1Answers: 10,949 Site admin
    Answer ✓

    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#Mario# Posts: 7Questions: 3Answers: 0

    Hi Allan,

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

    Thank you so much for your answer.

    Mario

This discussion has been closed.