Change style in dash DataTable drop down

Dash Python
1

Hello,

is it possible to change the style inside a dropdown of a DataTable? I want a dark theme layout but if i change the backgroundcolor of the Table to dark and the font color to white, this does not apply to the dropdown. The dropdown background is white and the font is still dark

dropdown={
    'vary': {
        'options': [
            {'label': str(i), 'value': str(i)}
            for i in params['vary'].unique()
        ]
    , "clearable" : False } }
2

Hi,
I’m not sure if you’re referring to the cell where the dropdown box is or the dropdown list.
If it is the former, you may consider modifying the style_data or style_data_conditional property.
Otherwise, I currently can only think of adding some CSS like this below.

.dash-table-container.Select-menu-outer {background:black;}

I’ll keep an eye out for a better way for you.

-----update-----

Refer to

3

The font in the cell with the dropdown has another color than the rest of the cells in the table. I can pick between two values: True and False and one of them is default and set before using the dropdown. Before using the dropdown and after using it the font is still black. But the other thing (changing the dropdown list itself) would be also cool. I am relatively new to Python/Plotly, where can i change style_data or style_data_conditional for the cells and where can i change
.dash-table-container.Select-menu-outer {background:black;}
Thank you Sir!

4

FYI

And note Ann’s post I attached to my last reply.

5

unfortunately this does not work for the font in the cell, to be able to understand the problem I post the code and a picture to it

dash_table.DataTable(

id="table_params",
columns= [],             
data= [],
style_cell={"color" : colors["text"], "backgroundColor" : colors["background"]},  #dropdowns sind Trotzdem weis...  

style_header={
"color" : colors["text"],
'backgroundColor': colors["table_background"],
'fontWeight': 'bold',
"textAlign" : "left"},

style_cell_conditional=[
    {
        'if': {'column_id': "vary"},
        'textAlign': 'center',
        "color": "white",
        "backgroundColor" : "black"

    } 
],
style_data={
    'color': 'white',
    'backgroundColor': 'black'
},

css=[
    {

        "selector": ".dash-table-container .Select-menu-outer",
        "rule": "background: black",
        "rule": "color white"        

    },
],

)

Screenshot from 2022-03-29 16-17-01
Screenshot from 2022-03-29 16-17-011695×290 22.2 KB

My app works on Azure, so i cant go in any css folders

6

Try

css=[
                             {
                                 "selector":
                                 ".dash-spreadsheet-container .Select-value-label",
                                 "rule": "color: white"
                             },
                         ],
7

Thank you man!
Is there also a solution like that for the text in dropdowns?

8

Just use the browser inspector to find the corresponding selector.
Try it.

9

I now have everything as I want it. thank you for your time man really I appreciate it.

1 Like