Bootstrap 4 Table with class="table table-sm table-dark"

mertdogan

If i set "scroller": true, theme is broken. Background and text appears as white and seems invisible. How can i fix this?

allan

Can you link to a test case showing the issue please?

Allan

mertdogan

https://jsfiddle.net/o70pw48x/1/

mertdogan

And more clear https://jsfiddle.net/o70pw48x/2/

PaulFreeWebs

https://jsfiddle.net/o70pw48x/3/ fixed your text change red to what colour you want

mertdogan

Thank you @PaulFreeWebs but this is not solution. Because, i don't want to set text to different values.

If we remove "scroller":true, setting from the datatables, datatables body and text color seems as themes default colors. This is exactly what is must be.

But when we apply "scroller":true, theme is broken and body background and text appears as white.

With theme color font color is white; there is not any problem at there. But scroller:true setting brakes background theme color.

Datatables must be looks like this, when "scroller":true >>> https://jsfiddle.net/o70pw48x/4/

allan

Thank you. When scroller is enabled, and its CSS loaded, it includes:

div.DTS div.dataTables_scrollBody table {
    background-color: white;
}

which is causing the problem here.

The issue is that Bootstrap doesn't colour the table by default (i.e. it is transparent), but Scroller uses a background to show areas where content hasn't yet been loaded (diagonal stripes). Since the table is transparent, that would show threw and hence the need for a background colour.

It would be possible to use a SCSS variable for that, but then you'd need to compile your own stylesheet.

Other than dropping the diagonal background, I don't see a way to address this I'm afraid.

Allan

mertdogan

Thank you @allan . I hacked this scroller plugin bug with

"initComplete": function( settings, json ) {
$('.table-dark').css("background-color", "#212529");
},

for now. This is not a professional solution but for i find a better solution, this is the best for me.

I will be wait for that developers correct this bug in codes.