Hide a dropdown on dash app

Dash Python
1

Hi,

How can I have a functional dropdown but not showing it on my dash app? Thanks!

dcc.Dropdown(
id=‘question-type-dropdown’,
# options=[{‘label’: k, ‘value’: k} for k in dict_question.keys()],
options=[{‘label’: k, ‘value’: k} for k in [‘A’]],
# multi=True,
value=‘A’
),

2 
dcc.Dropdown(..., style={'display': 'none'})
4 Likes
3

I have wondered the same thing, in even more general way. What I would like to have is multiple dropdowns and sliders, which are shown or hidden conditionally on the previous selections. Something like column with multiple forms:

mainSelect
labelA (only visible if value in mainSelect is A)
selectA (only visible if value in mainSelect is A)
labelB1 (this an below are visible only if value in mainSelect is B)
selectB1
labelB2
selectB2
labelB3
sliderB3

Do I need to rely on some external Javascript like jQuery? That would probably work but I would prefer more “pythonic” way…

4

The Dash way to do this would be to set the container’s style to {'display': 'none'} for each of the components (multiple callbacks)

5

html.Div([

        dcc.Dropdown(

            id='image-dropdown_1',
            options=[{'label': i, 'value': i} for i in list_of_images],
            value=list_of_images[0],
            style={'display': 'none'})],

        className = 'two columns'),

#------------------------------------------------------------
Doing this on my end generates an error:

"TypeError: Unexpected keyword argument style

Allowed arguments: className, clearable, disabled, id, multi, options, placeholder, searchable, value"

Can we hide Dropdown components without a style attribute?

6

I encountered the same problem when I was trying to change the look of my dropdowns.

If there is ever any component you want to hide however, you can always just create a div around it and change the style attribute for that div to {‘display’: ‘none’}.

1 Like