CODEWITHSUNDEEP
pythonplotly-dash
sgrimes
sgrimes

Reputation: 159

How to Resolve Dash Bootstrap No_Gutter Type Error

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)

Upvotes: 5

Views: 4966

Answers (2)

Gabriel Ribeiro
Gabriel Ribeiro

Reputation: 71

You can just switch the

no_gutters=True

For

className="g-0"

Upvotes: 7

Daniel Al Mouiee
Daniel Al Mouiee

Reputation: 1200

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.

Upvotes: 4

Related Questions