✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Issue with dbc.col and dcc.dropdown

Hi, for some reason when I try and use a dbc.Col on a dcc.Dropdown I get the following error:

TypeError: The `dash_bootstrap_components.Col` component (version 0.10.2) with the ID "Dropdown(id='County Search', options=[{'label': 0, 'value': 0}, {'label': 2, 'value': 2}, {'label': 3, 'value': 3}, {'label': 4, 'value': 4}, {'label': 5, 'value': 5}], value=[], multi=True)" detected a Component for a prop other than `children`
Did you forget to wrap multiple `children` in an array?
Prop id has value Dropdown(id='County Search', options=[{'label': 0, 'value': 0}, {'label': 2, 'value': 2}, {'label': 3, 'value': 3}, {'label': 4, 'value': 4}, {'label': 5, 'value': 5}], value=[], multi=True)

The code I used is here:

  dbc.Row([
        dbc.Col(
            html.Label('Select County to Observe'), #change this to value to observe, since click or search will be for county
                dcc.Dropdown(
                    id='County Search',
                    options=[{'label': i, 'value': i} for i in available_indicators]
                    , value=[],
                    multi=True
                    ),
            width = 6),
            ]), #top row

Thanks!

You just need to wrap the children of dbc.Col in brackets.

dbc.Row([
    dbc.Col([
        html.Label('Select County to Observe'), #change this to value to observe, since click or search will be for county
        dcc.Dropdown(
            id='County Search',
            options=[{'label': i, 'value': i} for i in available_indicators],
            value=[],
            multi=True
        ),
    ], width = 6),
]), #top row

Ahh because it’s multi line - right. Thanks!