dbc.Col TypeError

Dash Python
1

This is my layout code:

layout = dbc.Container([
    dbc.Row([
        dbc.Col(
            dbc.Row(
                html.Div(
                    children=[
                        dcc.Textarea(
                            id='csf1',
                            value='',
                            readOnly=True,
                            style={'width': '30%', 'height': 30, 'text-align': 'center', 'margin-right': '10px'}
                        ),
                        dcc.Textarea(
                            id="ad-perc", 
                            value='',
                            style={'width': '20%', 'height': 30, 'margin-right': '10px', 'text-align': 'center'}
                        ) 
                    ],
                    style={'display': 'flex', 'flex-direction': 'row', 'margin-top': '60px'}
                )
            ),
            dbc.Row([
                html.Div([
                    dcc.Textarea(
                        id='zero-budget-case-relative',
                        value='Impact: 391k€',
                        style={'width': '50%', 'height': 30, 'text-align': 'center'}
                    )
                ]),
            ])       
        ),
        dbc.Col(
            html.Div(
                dcc.Graph(id='bar-chart', style={'margin-top': '60px'})
            ), width=7
        )
    ]),
    dbc.Row([
        dbc.Col(html.Div(
            children=[
                dcc.Textarea(
                    id='csf-measures',
                    value='',
                    style={'width': '100%', 'height': 400, 'text-align': 'center', 'margin-top': '10px'}
                ),
            ],
            style={'display': 'flex', 'flex-direction': 'column', 'align-items': 'center', 'margin-top': '10px', 'margin-left': '10px'}
        ))
    ])
], fluid=True)

However, if I want to execute my app, I get the following error message and I don’t know why.

TypeError: The `dash_bootstrap_components.Col` component (version 1.4.2) with the ID "Row([Div([Textarea(id='zero-budget-case-relative', style={'width': '50%', 'height': 30, 'text-align': 'center'}, value='Impact bei 0% W+I Finanzierung: 391k€')])])" detected a Component for a prop other than `children`
Prop id has value Row([Div([Textarea(id='zero-budget-case-relative', style={'width': '50%', 'height': 30, 'text-align': 'center'}, value='Impact bei 0% W+I Finanzierung: 391k€')])])     

Did you forget to wrap multiple `children` in an array?
For example, it must be html.Div(["a", "b", "c"]) not html.Div("a", "b", "c")

I already wrapped said children into square brackets, but I still get the error message. What am I missing?

2

Hi @matti

The dbc.Col has two dbc.Row components as children, so it needs to be wrapped in square brackets

dbc.Col([
    dbc.Row(...),
    dbc.Row(...),
])
2 Likes