How to Resolve Dash Bootstrap No_Gutter Type Error

user_17670715 0
Viewed 1937

When I run this code, I get an error message saying "Error: The dash_bootstrap_components.Row component (version 1.0.2) received an unexpected keyword argument: no_gutters Allowed arguments: align, children, className, class_name, id, justify, key, loading_state, style"

I believe it's because of the dash bootstrap version I use. How do I modify my code to make it work?

app.layout = dbc.Container([

    dbc.Row(
        dbc.Col(html.H1("My Dashboard",
                        className='text-center'),
                width=12)
    ),

    dbc.Row([

        dbc.Col([
            dcc.Dropdown(id='my-dpdn', multi=False, value='A',
                         options=[{'label':x, 'value':x}
                                  for x in sorted(df['Value'].unique())],
                         ),
            dcc.Graph(id='line-fig', figure={})
        ],# width={'size':5, 'offset':1, 'order':1},
           xs=12, sm=12, md=12, lg=5, xl=5
        ),

        dbc.Col([
            dcc.Dropdown(id='my-dpdn2', multi=True, value=['B','C'],
                         options=[{'label':x, 'value':x}
                                  for x in sorted(df['Value'].unique())],
                         ),
            dcc.Graph(id='line-fig2', figure={})
        ], #width={'size':5, 'offset':0, 'order':2},
           xs=12, sm=12, md=12, lg=5, xl=5
        ),

    ], no_gutters=True, justify='start')


], fluid=True)
plotly-dash python
2 Answers

You can just switch the

no_gutters=True

For

className="g-0"
user_180749660

As of Version 1.0 for Dash-bootstrap-components, the no_gutters attribute for the Row component has been deprecated. You are probably using code from a version <= 0.13, read this migration guide for the full details of the changes.

You have a couple of options here:

  1. Reading that migration guide will suggest the new way of removing gutters under the heading Row without 'gutters'

Dropped no_gutters prop. Use gutter modifier classes instead. See the docs for examples.

2- You can revert your dash-bootstrap-components library back to 0.13 (eg. pip install dash-bootstrap-components==0.13), but this is not recommended.

user_87073370
Related