I use the trick of setting the style of components to {‘display’: ‘none’}/{‘display’: ‘block’} to hide/show them. It works fine for simple things but fails for others. Is there a better way to do this? In my example below when clicking on the hide switch, you can see that there is no style to begin with and the rows look like I want them to. When I try to show it again using {‘display’: ‘block’} the row does not look right. When I use style = None it does. The problem with style = None is that there may be other style elements to begin with that I want to preserve and that is why I only change the ‘display’ of the style if style is not None.
"""Minimal dash program."""
from dash import callback, Dash, dcc, html, Input, Output, State
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
import json
DO_NOT_DISPLAY_STYLE = {'display': 'none'}
DISPLAY_STYLE = {'display': 'block'}
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([dbc.Row(dmc.Switch(id='hide-switch', size='lg', checked=False, label='hide')),
dbc.Row([dbc.Col([dbc.Row(dbc.Label('Type')),
dbc.Row(dbc.Col(dcc.Dropdown(id='cp-new-key-type',
options=['str',
'int',
'float',
'bool'],
value='int')))]),
dbc.Col(dbc.Row([dbc.Col([dbc.Row(dmc.Switch(id="cp-key-min",
size='lg',
checked=False,
label='Min')),
dbc.Row(dbc.Input(id="cp-new-key-min",
type='number',
value=None,
placeholder='none'))])]))],
id='hide-row'),
html.Div('', id='msg'),
dbc.Row([dbc.Col([dbc.Row(dbc.Label('Type')),
dbc.Row(dbc.Col(dcc.Dropdown(id='cp-new-key-type2',
options=['str',
'int',
'float',
'bool'],
value='int')))]),
dbc.Col(dbc.Row([dbc.Col([dbc.Row(dmc.Switch(id="cp-key-min2",
size='lg',
checked=False,
label='Min')),
dbc.Row(dbc.Input(id="cp-new-key-min2",
type='number',
value=None,
placeholder='none'))])]))],
id='hide-row2'),
html.Div('', id='msg2')])
@callback(Output('hide-row', 'style'),
Output('hide-row2', 'style'),
Output('msg', 'children'),
Output('msg2', 'children'),
Input('hide-switch', 'checked'),
State('hide-row', 'style'),
State('hide-row2', 'style'),
prevent_initial_call=True)
def hide_row(hide, input_style, input_style2):
"""Hide/unhide the row."""
if hide:
if input_style is not None:
ret_hide = input_style.copy()
ret_hide['display'] = 'none'
else:
ret_hide = DO_NOT_DISPLAY_STYLE
ret_hide2 = DO_NOT_DISPLAY_STYLE
else:
if input_style is not None:
ret_hide = input_style.copy()
ret_hide['display'] = 'block'
else:
ret_hide = DISPLAY_STYLE
ret_hide2 = None
ret_in_style = f"in style: {json.dumps(input_style) if input_style is not None else 'None'}"
ret_out_style = f"out style: {json.dumps(ret_hide)}"
ret_in_style2 = f"in style2: {json.dumps(input_style2) if input_style2 is not None else 'None'}"
ret_out_style2 = f"out style2: {json.dumps(ret_hide2) if ret_hide2 is not None else 'None'}"
return ret_hide, ret_hide2, f"{ret_in_style}, {ret_out_style}", f"{ret_in_style2}, {ret_out_style2}"
if __name__ == '__main__':
app.run_server(debug=True)
