How to position my chart with Dash Bootstrap Components

Dash Python
1

Hello, I’m having a problem with the positioning of my chart on the page, in this case I’m using Dash Bootstrap Components to create rows and columns on the page…

My graphic should be next to the Card, but it’s under the Card, where am I doing wrong?

app.layout = html.Div(children=[

        dbc.Row([

                dbc.Col([

                        dbc.Card([
                                
                                 html.H5('Opcões'),
                                 dcc.Dropdown(opcoes, value = 'ACS' , id='check_opcao', style={'width': '90%'}),
                                 
                        ],style={'height': '90vh', 'margin': '10px', 'padding': '20px', 'width': '300px'})

                ], sm=2),

                dbc.Col([

                        dbc.Row([dcc.Graph( id='grafico_gc_players')])

                ],sm=10)
        ])

Captura de tela de 2022-10-10 12-03-57
Captura de tela de 2022-10-10 12-03-571826×945 20.8 KB

2

I ended up forgetting to pass the external stylesheet so that the graphic would be aligned :man_facepalming:

app = dash.Dash(external_stylesheets=[dbc.themes.CYBORG])