Hi All,
I am new to the Dash framework and love the product, great job @chriddyp and team!
I am running into an issue whereby a conditional callback triggers the expansion of a dbc.collapse element, hoping to expand the collapse element and remove certain fields from the base {‘display’:‘none’}, based on the trigger. Additionally, I am trying to use conditional population of titles, such that a different title is returned by the callback conditionally based on the conditional “n_clicks” logic.
I have coded up the below, but the conditional {‘display’:‘none’} doesn’t appear to work within the dbc.collapse element.
The project is a large multipage app, and I am confident that the collapse element triggers based on conditional clicks. I have attached code relating to the element expanded upon the “collapse” trigger, and the associated callback below.
Any help in achieving the desired behaviour is greatly appreciated
detailed_card = html.Div(children=[
dbc.Card(children=[
dbc.CardHeader(className='card-title', id='dynamic-text-header'),
dbc.CardBody(children=[
html.Br(),
dbc.Row(children=[
dbc.Col(html.Div('Select an option:', id='dropdown-selector-a', style={'color': 'grey', 'fontSize': 10, 'display': 'block'})),
dbc.Col(
html.Div([
dcc.Dropdown(id="dropdown-selector-a-dropdown",
options=[{'label': 'Option One', 'value': 'OPTONE'}],
value='OPTONE',
persistence=True,
persistence_type='memory'),
html.Br(),
], style={'fontSize': 10, 'display': 'block'}),
),
]),
html.Br(),
dbc.Row(children=[
dbc.Col(html.Div('Text Entry', id='text-entry-a-', style={'color': 'grey', 'fontSize': 10, 'display': 'block'})),
dbc.Col(
html.Div([
dcc.Input(id="text-entry-a-input",
type="number",
placeholder="Initial",
persistence=True,
persistence_type='memory'),
html.Br(),
], style={'fontSize': 10, 'display': 'block'}),
),
]),
html.Br(),
dbc.Row(children=[
dbc.Col(html.Div('Text Entry B', id='text-entry-b-input', style={'color': 'grey', 'fontSize': 10})),
dbc.Col(
html.Div([
dcc.Input(id="text-entry-b-input-panel",
type="number",
placeholder="Textblock",
persistence=True,
persistence_type='memory'),
html.Br(),
], style={'fontSize': 10}),
),
], align="center",
),
html.Br(),
dbc.Row(children=[
dbc.Col(html.Div('Select a Model:', id='text-box-c', style={'color': 'grey', 'fontSize': 10})),
dbc.Col(
html.Div([
dcc.Dropdown(id="text-box-c-dropdown",
options=[{'label': 'Model One', 'value': 'MODONE'}],
value='MODONE',
persistence=True,
persistence_type='memory'),
html.Br(),
], style={'fontSize': 10}),
),
]),
html.Br(),
dbc.Row(children=[
dbc.Col(html.Div('Date', id='date-text',style={'color': 'grey', 'fontSize': 10, 'display': 'block'})),
dbc.Col(
html.Div([
dcc.DatePickerSingle(id='date-datepicker',
min_date_allowed=(date.today() - timedelta(days=366)),
max_date_allowed=(datetime.today() - timedelta(days=1)),
initial_visible_month=str(datetime.today().month),
date=(date(datetime.today().year,
datetime.today().month,
datetime.today().day) - timedelta(days=1)),
with_portal=True,
persistence=True,
persistence_type='memory',
),
html.Br(),
], style={'fontSize': 10, 'display': 'block'}),
),
], align="center"),
html.Br(),
dbc.Button(color="danger", id="run-base",n_clicks=0),
dcc.ConfirmDialog(id='confirm-actions', message='This will initialise the process. Are you sure you want to continue?'),
]),
])
])
@app.callback(Output("collapse-from-main", "is_open"),
Output('input-parameters', 'children'),
Output('dynamic-text-header', 'children'),
Output('text-entry-b-input', 'style'),
Output('text-entry-b-input-panel', 'style'),
Output('text-box-c', 'style'),
Output('text-box-c-dropdown', 'style'),
Input('collapse-selector-two', 'n_clicks'),
Input('collapse-slector-one', 'n_clicks'),
State("collapse-from-main", "is_open"))
def displayClick(collapse_selector_two, collapse_selector_one, is_open):
changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
if 'collapse-selector-one' in changed_id:
return not is_open, detailed_card, "Title One", {'display': 'block'}, {'display': 'block'}, {'display': 'block'}, {'display': 'block'}
elif 'collapse-selector-two' in changed_id:
return not is_open, detailed_card, "Title Two", {'display': 'none'}, {'display': 'none'}, {'display': 'none'}, {'display': 'none'}
else:
return is_open, None, None, None, None, None, None