Options in dcc.Dropdown invisible but selectable

Dash Python
1

I defined a dcc.Dropdown like this:

dcc.Dropdown(
            id='measurements-select',
            options=measurements_opt,
            multi=True,
        )

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'},
]

image
image1113×194 2.57 KB

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?

2

Hi @matti,

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

3

I am using this bootstrap theme:

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

@matti
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

dcc.Dropdown(
    [
        {
            "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'
)

image

5

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

6

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' 
     }
]
7

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(
    __name__,
    external_stylesheets=[
        dbc.themes.DARKLY,
        "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates@V1.0.2/dbc.min.css",
    ]
)
app.layout = html.Div(
    [
        dcc.Dropdown(options=[1, 2, 3]),
        dcc.Dropdown(options=[1, 2, 3], className='dbc')
    ]
)

if __name__ == '__main__':
    app.run()
3 Likes
8

Hi @AIMPED,

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.

Thanks.

1 Like