Show/hide radio and form elements in a menu


#1

This sort of thing is way out of my area. My app has about 20 radio buttons, dropdown boxes, checkboxes, etc. The actual figure is now beneath the fold, difficult to see without scrolling. Eventually, there will be at least 40 buttons/options which is clearly a UX nightmare but the application needs this fine level of control.

I’m trying to find a neat (react?) solution which hides the div containing all the form elements (radio buttons etc) on click, in an elegant menu. Then another click swipes them back again. Any ideas? I imagine this may come up again…

Cheers

Will


#2

You’ll have to post some screenshots when you’re done :slight_smile:

Would something like this work?

app.layout = html.Div([
    dcc.RadioItems(
        id='toggle',
        options=[{'label': i, 'value': i} for i in ['Show', 'Hide']],
        value='Show'
    ),
    html.Div(id='controls-container', children=[
        # all of your controls
        dcc.Dropdown(...)
        # ...
    ]),
    dcc.Graph(...)
])

@app.callback(Output('controls-container', 'style'), [Input('toggle', 'value')])
def toggle_container(toggle_value):
    if toggle_value == 'Show':
        return {'display': 'none'}
    else:
        return {'display': 'block'}

#3

Oh, simple idea. Ha, thanks Chris. Was expecting it to be way more complicated. Will see if I can expand on that - thanks a lot!


#4

Another way to do this is to use dash_html_components.Details and dash_html_components.Summary. This is native in HTML5, no callbacks required! See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details for details.

html.Details([
    html.Summary('Label of the item'),
    html.Div('Contents')
])

I use this in the dash user guide to hide/show the code blocks


Collapsible Div in Dash?
#5

Love it @chriddyp - perfect!


#6

This looks ideal; however, the dcc.Dropdown component doesn’t have a ‘style’ attribute. How can we toggle a component’s display without this?

I’m sure I’m overlooking something and it’s a quick fix.

===========================================

I found one resolution. You can bypass using the style attribute and control the display of html elements by returning the children argument in a callback.


#7

Thank you for the solution. I got this convo while searching for tabbing solution. I think it works perfectly.


#8

my graph width was reduced after it was wrapped with html.Detailed. how should i fix it?

html.Div([
html.Details([
dcc.Graph(id=‘corner_indicators’, config={‘displayModeBar’: False})
])
], className=‘row’),