Black Lives Matter. Please consider donating to Black Girls Code today.
Dash Enterprise delivers an incredible 21x cost savings 💸Download the e-book!

DataTable goes blank when using bootstrap (dbc) themes

Hi,

I tried to setup a filterable table following the example code given in the documentation.


The Backend Paging with Filtering and Multi-Column Sorting one.

It works fine.

However, when I change to use a bootstrap theme:

The font in the table becomes white/invisible:

The data is still there. As it is visible when I select a cell:

How can I use the data table element in a DBC themed setup?
What needs to be done to get the table to be formatted as a DBC table?

Thank you.
Baadal

The problem appears to be that you’re using a dark Bootswatch theme, which sets the font color to white (or something close to it), but doesn’t have any effect on the cell backgrounds.

The easiest thing to do is to use a light theme. If you want to use the dark theme you’re going to have to manually style the datatable, i.e. use the inspector in the browser to find out which classes etc. are being used to set the cell colors and try to override it.

1 Like

Thank you! That was it!

Hi @tcbegley,

One follow up question.

One of the columns in the table was too wide and was making the table go out of the visible area.
So I fixed the table size with a horizontal scroll bar using the overflowX.

Here is the code snippet:

Everything seems ok, except for the select column on the left. Only half of it is showing up:

Do you know of any way to show it completely?
Or to achieve a similar layout in other ways?

Thank you again!
Baadal

Hey @baadal

The problem is likely that dash-table and Bootstrap both use a CSS class called row and they clash. Try adding the following CSS to a file in your assets/ folder. It will override the properties of the Bootstrap row within the table.

.dash-table-container .row {
  display: block;
  margin: 0;
}

See here for more details about adding custom CSS if you’re unfamiliar.

1 Like

Thanks a ton! That worked!

I am not a web developer by trade.
Would you suggest any relevant topics and resources to begin to understand these moving parts?

Regards,
Baadal

MDN has great resources such as this introduction to HTML and this introduction to CSS are both well worth reading.

In addition to that, I often find it useful to use the developer tools in my browser to inspect what is actually getting rendered by the browser, making edits / changes there, then trying to figure out how I could have made that change happen from within my Dash app. Check out this intro to using the developer tools to get up to speed quickly.

2 Likes