Change Div style with @app.callback

Dash Python
1

Hi!

I’m trying to change the Div style with a callback, but getting an error:
dash.exceptions.InvalidCallbackReturnValue: The callback …admin_dropdown_div.style… is a multi-output.

@app.callback(
    [Output('admin_dropdown_div', 'style')],
    [Input(component_id='year-selected', component_property='value')]
)
def admin_dropdown_div(input1):
    if current_user.all_regions == 1:
        return {'display': 'block'}

are there options to fix this?

2

@Masya

Remove the brackets [] from the Output:

@app.callback(
    Output('admin_dropdown_div', 'style'),
    [Input(component_id='year-selected', component_property='value')]
)
def admin_dropdown_div(input1):
    if current_user.all_regions == 1:
        return {'display': 'block'}
3

Include the [ ] in Output when you have 2 or more outputs in one callback

1 Like
4

@flyingcujo, @dimark, thanks, it works! But when i have 2 outputs i need to use the brackets [], and this leads to the same error

@app.callback(
     [Output('admin_dropdown', 'options'), Output('admin_dropdown_div', 'style')],
     [Input(component_id='year-selected', component_property='value')]
 )
 def dropdown(input1):
     if current_user.all_regions == 1:
         df_clients_main = df_clients
         dd_options = [{'label': i, 'value': i} for i in df_clients_main['CityCred'].unique()]
         dv_style = {'margin-left': '5%', 'margin-top': '1%', 'display': 'block'}
         return [dd_options, dv_style]

dash.exceptions.InvalidCallbackReturnValue: The callback …admin_dropdown.options…admin_dropdown_div.style… is a multi-output.
Expected the output type to be a list or tuple but got None.

5

@Masya

Well it is hard to tell without posting your full code (or a standalone example).

Assuming that is your complete function, it could be possible that your if condition evaluates to False (for example during the startup initial firing of callbacks).
Then your function simply does nothing, even though a return is expected.

Could you try to add a raise PreventUpdate or some dummy return values?

@app.callback(
    [Output('admin_dropdown', 'options'), Output('admin_dropdown_div', 'style')],
    [Input(component_id='year-selected', component_property='value')]
)
def dropdown(input1):
    if current_user.all_regions == 1:
        df_clients_main = df_clients
        dd_options = [{'label': i, 'value': i} for i in df_clients_main['CityCred'].unique()]
        dv_style = {'margin-left': '5%', 'margin-top': '1%', 'display': 'block'}
        return [dd_options, dv_style]
    raise PreventUpdate # or return some dummy values
6

@dimark you are right, everything worked without errors for me. thank you very much for your time!

@app.callback(
    [Output('admin_dropdown', 'options'), Output('admin_dropdown_div', 'style')],
    [Input(component_id='year-selected', component_property='value')]
)
def dropdown(input1):
    if current_user.all_regions == 1:
        df_clients_main = df_clients
        dd_options = [{'label': i, 'value': i} for i in df_clients_main['CityCred'].unique()]
        dv_style = {'margin-left': '5%', 'margin-top': '1%', 'display': 'block'}
        return [dd_options, dv_style]
    else:
        return [[], {'margin-left': '5%', 'margin-top': '1%', 'display': 'none'}]
7

For multi-outputs, the return value must be a ist or a tuple. In your case above, I beleive you were getting the error since not all paths in your code returned the required number of outputs.

return dd_options, dv_style

or

return [dd_options, dv_style]
8

Can you add the output to your component in this format?

four_card = dbc.Card(
    dbc.CardBody(
        [
            html.H5(dcc.Link("Name", href='/name'), className="card-title", style=style.TEXT_STYLE),
        ]
    ),  style="admin_dropdown_div"
)