Dash Layout Help - Multiple HTML Components inside of Column

Dash Python
1

I’m new to Plotly and Dash and am working on my first Dash layout. I am getting an error when having two consecutive html components using the code below, saying

TypeError: The dash_bootstrap_components.Col component (version 0.10.0) with the ID “H2(‘Dash is so interesting!!’)” detected a Component for a prop other than children
Did you forget to wrap multiple children in an array?

It seems to work fine with one HTML components, but when I add another there is an issue.

Code:

app.layout = html.Div([

                top_nav, 

                html.Div([

                    dbc.Row([

                        dbc.Col(

                            city_profile_map,

                            width = 6

                        ),

                        dbc.Col(

                            html.H1("This is my first dashboard"),

                            html.H2("Dash is so interesting!!"),

                            width = 3

                        ),

                    ]

                    ),

                    html.H1("This is my first dashboard")                   

                ])

])

Can anyone help with this?

2

Never mind, figured it out! I had to wrap that content in a list as children

So I needed to do something like this-

app.layout = html.Div([

                top_nav, 

                html.Div([

                    dbc.Row([

                        dbc.Col(

                            city_profile_map,

                            width = 6

                        ),

                        dbc.Col(children=[

                            html.H1("This is my first dashboard"),

                            html.H2("Dash is so interesting!!"),

                            width = 3

                        ]),

                    ]

                    ),

                    html.H1("This is my first dashboard")                   

                ])

])
1 Like