Text color in Dash Datatable's dropdowns

Dash Python
1

Hi everyone. I hope you are safe.
I am making a Datatable that includes a column with dropdowns. In the app, there is an option to change the Bootstrap theme (yes it’s with Bootstrap), and I made a callback that changes the datatable cells’ background colour accordingly. In general the colour of the text is updated with the Bootstrap them. However, the text of the dropdowns stays black and doesn’t follow the colour of the rest of the datatable contents.

In the explanation page for dropdowns in datatables :
https://dash.plotly.com/datatable/dropdowns

you will notice that while the content of the example datatables are cyan in general, the dropdowns are black.

So my question is : what’s the property that I should output in my callback to modify the colours of the dropdown ?
Many thanks in advance!

2

@Ouwa Did you ever find a solution to this? I just ran into the same issue. Thanks.

3

Hi @GaryG ,
Sorry, I haven’t. Unfortunately the datatable compatibility between datatable and bootstrap theme is not optimal, or at least straightforward.
Good luck with your application
Ouwa

4

Thanks @Ouwa !

Found it in the css file. I was trying to implement a dark theme and couldn’t see the text. I added these two properties to my local css file.

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]){
color: var(–Theme_dtbl-fltr-txt) !important;
}

also

.dash-spreadsheet-container .dash-spreadsheet-inner table {
border-collapse: collapse;
font-family: monospace;
–accent: var(–DLnew_blue) !important;
–text-color: yellowgreen !important;
–hover: var(–CGblue_light) !important;
–faded-text-header: yellowgreen !important;
–selected-background: yellowgreen !important;
}

these combination allowed me to implement a dark theme and control the text color of the resulting value displayed from the dropdown in the datatable, as well as apply some custom colors to the value options in the dropdown itself. There was another post on the forum somewhere that clued me in. (I will try and find that again and reference for you).

Hope this is helpful to you.

5

yah - just search on “.dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox])”. There was a post by @AnnMarieW about a year ago that covered it. Good luck with your projects!

6

Hey @GaryG – I’m glad you found that post helpful!

For anyone looking for more info on styling the DataTable or other Dash Core Components, check out my site:
https://hellodash.pythonanywhere.com/

7

Hi, I have been facing a similar issue regarding changing the text-color of my dropdown options in dash datatable.
I was unable to use the solution proposed here. So I was wondering if it is possible to change the text-color property by including some lines of code in the ‘css’ property of DataTable.

This is my current table structure:

tuning_options = ['grid-search','random-search','bayes-search']
dash_table.DataTable(id='model-selection-table',data=model_select_df.to_dict("records"),
                                     columns=[{"name": i, "id": i,"presentation":'dropdown','editable':True} if i =='Hyperparameter Tuning Method' else {"name": i, "id": i} for i in model_select_df.columns
                                             ]
                                     ,row_selectable="multi",
                                     selected_rows=[],
                                     dropdown = {
                                         'Hyperparameter Tuning Method': {
                                             'options': [
                                                 {'label': i, 'value': i}
                                                 for i in tuning_options
                                                 ],
                                             },
                                         
                                                 },
                                     style_data={
                                     'backgroundColor': 'rgb(50, 50, 50)',
                                     'color': 'white'
                                     },
                                     style_filter={
                                         
                                         'color': 'white'
                                         },
                                 style_table={
                                     'overflowY': 'scroll',
                                     'maxHeight': '700px',
                                     'color':'white',
                                     'font-size':25},
                                 style_header={
                                     'backgroundColor': 'rgb(30, 30, 30)',
                                     'color': 'white',
                                     'font-size':25
                                },css=[ {"selector": ".Select-menu-outer", "rule": 'display : block !important'},
                                       
                                       ],style_data_conditional=[{'if':{'column_id':'Hyperparameter Tuning Method'},
                                                                  'color':'white'}],
                                     )

The column named "Hyperparameter Tuning Method’ is a column with dropdowns whose text color i would like to change.

this is what my table looks like:

image
image799×345 7.44 KB

I was thinking if implementing something like this and adding it to the css parameter would work or not:

{“selector”:‘.dash-spreadsheet-inner-table’,‘rule’:‘text-color: white !important’}

similar to what we do when we want to show the dropdown options in the datatable.

Any help would be appreciated. Thanks!