Options in dcc.Dropdown invisible but selectable

I defined a dcc.Dropdown like this:


This is my options list:

measurements_opt = [
    {'label': 'VAs & Kongresse', 'value': 'VAs & Kongresse'},
    {'label': 'Laufende Basiskosten', 'value': 'Laufende Basiskosten'},
    {'label': 'Anzeigen & PR', 'value': 'Anzeigen & PR'},
    {'label': 'MaFo', 'value': 'MaFo'},
    {'label': 'Projekt “Optimale Versorgung”', 'value': 'Projekt “Optimale Versorgung”'},
    {'label': 'Social Media / Awareness', 'value': 'Social Media / Awareness'},
    {'label': 'VA Vertrieb', 'value': 'VA Vertrieb'},

This is how the Dropdown looks like on the page. I can’t see the options but I can select them and then they show up as selected. I can also unselect them, but then they disappear again in the Dropdown.
Am I doing something wrong?

Hi @matti,

Are you using any custom css stylesheets or dash-bootstrap themes in your app?

I am using this bootstrap theme:

app = Dash(__name__, use_pages=True,  external_stylesheets=[dbc.themes.DARKLY])

The dash core components does not directly inherit the style properties from dbc themes. You could try using a different dbc theme.

Or you could style the options list with your preferred text color as shown in this example

from dash import dcc, html

            "label": html.Span(['Montreal'], style={'color': 'Gold', 'font-size': 20}),
            "value": "Montreal",
            "label": html.Span(['NYC'], style={'color': 'MediumTurqoise', 'font-size': 20}),
            "value": "NYC",
            "label": html.Span(['London'], style={'color': 'LightGreen', 'font-size': 20}),
            "value": "London",
    ], value='Montreal'


@matti I think you could add className='dbc' to the dcc.Dropdown() too.

className='dbc' didn’t do any difference.

The other solution worked though.
My code now looks like this:

measure_opt2 = [
    {'label': html.Span(['VAs & Kongresse'], style={'color': 'blue'}), 
     'value': 'VAs & Kongresse' 
    {'label': html.Span(['Laufende Basiskosten'], style={'color': 'blue'}), 
     'value': 'Laufende Basiskosten' 
    {'label': html.Span(['Anzeigen & PR'], style={'color': 'blue'}), 
     'value': 'Anzeigen & PR' 
    {'label': html.Span(['MaFo'], style={'color': 'blue'}), 
     'value': 'MaFo'
    {'label': html.Span(['Projekt “Optimale Versorgung”'], style={'color': 'blue'}), 
     'value': 'Projekt “Optimale Versorgung”' 
    {'label': html.Span(['Social Media / Awareness'], style={'color': 'blue'}), 
     'value': 'Social Media / Awareness' 
    {'label': html.Span(['VA Vertrieb'], style={'color': 'blue'}), 
     'value': 'VA Vertrieb' 

HI @matti, I forgot, that you have to include the stylesheet in order to make the className work. It applies some basic styling depending on the used theme (dark/bright).

import dash_bootstrap_components as dbc
from dash import Dash, dcc, html

app = Dash(
app.layout = html.Div(
        dcc.Dropdown(options=[1, 2, 3]),
        dcc.Dropdown(options=[1, 2, 3], className='dbc')

if __name__ == '__main__':


sorry for the late respons.
Just wanted to let you know that it also works by adding the external stylesheet. Makes the code look way better now.


1 Like