New to DataTables - Using in Flask Python App - Table Loads and then Flashes White

futuremanhank

Hey guys,

I am new to DataTables and just implemented it in my Flask app yesterday. For some reason, for a split second the table loads and is visible, but then all the rows of the table become white as well as the text inside the table.

I've tried a few different Tables from DataTables, but all appear to do the same thing and I am not sure why.

That is a picture of my table above. Does anyone have any idea as to what may be causing this?
Thanks!

colin

It could be a CSS clash perhaps. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

futuremanhank

Hi Colin! I have tried to quickly create a test case below!

https://codepen.io/FutureManHank/pen/XWzwObQ

It is not a full replication but part of the table is not being displayed properly and showing what I am seeing in my own site. In this test its only appearing in the headers/footers but imagine the root cause is the same.

allan

In your CSS you have:

thead th {
  background-color: white;
}

That's why the table headers are white. Likewise the footer.

If you right click on the table header and select "Inspect" the browser's inspector will show you where they styles are coming from.

Allan

futuremanhank

Thanks Alan! I've attached a few more example images. When my page first loads it looks correct, and has the alternating dark backgrounds. But it seems to sort to fit on the page and then reverts back to the very light colors. However, this doesn't seem to be happening in my test case.

futuremanhank

I've also used the Inspect Elements to locate the row backgrounds and attempted to change it to black as shown below:

table.dataTable tbody tr{background-color:#000000;}

However, nothing is changing. When I go to inspect the site again in the browser it shows me the following:

table.dataTable tbody tr {
background-color: #fff;
}

and this is showing as happening at datatables.min.css: Line 13 (which is what I replaced above with color-code #000000.

It's almost as if I am saving the file to make changes, yet the page is not thinking I have made any changes. I am very confused. Not a designer by any means so maybe this is something simple I am missing?

colin

Could you update the test case to reflect those changes, please, and we can take a look,

Colin

futuremanhank

I've updated the CSS in the test case to use the same CSS that I am using in my actual site but the behavior is different. It looks as it should (for the most part) in the test case but my actual site is showing differently and I am not sure why.

I am using Jinja templates to build my table based off of a database but don't see why that would be causing any difference in the CSS formatting.

colin

CSS is a stinker to debug without seeing it - we would need to see the issue to be able to progress this. Are you able to link to your production page?

Colin

futuremanhank

My production page currently is still in development and not really hosted anywhere just yet. Would there be any other way to get you the info that you need? Right now its just running on my local loopback IP.

colin

I've updated the CSS in the test case to use the same CSS that I am using in my actual site but the behavior is different. It looks as it should (for the most part) in the test case but my actual site is showing differently and I am not sure why.

As you said, you can't reproduce it elsewhere, so it would be impossible for us to diagnose without seeing it.

Colin