Plotly graph not rendering on the side of other widgets: dash_bootstrap_components Row appears identical to Col

Question

I'm building a data explorer using dash, plotly, and dash bootstrap components. I would like a layout for my data to look something like: desired graph layout However, using dbc to slowly build up the interface, the graph keeps getting put on top of all the other widgets like so: rendered layout.

Here is a minimal working example to highlight the problem:

sliders = dbc.Col(children=[
    'Iteration',
    dcc.Slider(id='iteration',min=0,max=1),
    'Frequency',
    dcc.Slider(id='frequency',min=0,max=1),
    'Depth log10(km)',
    dcc.Slider(id='depth',min=0,max=1),
    'Northing',
    dcc.Slider(id='north',min=0,max=1),
    'Easting',
    dcc.Slider(id='east',min=0,max=1),
    'Conductivity log10(km)',
    dcc.Slider(id='conductivity',min=0,max=1)])

controls = dbc.Col(children=[sliders],style={'width':'500px','borderWidth': '20px'})


app.layout = dbc.Container(children=[
        dbc.Row(children=[dbc.Col(dcc.Graph()),controls]),
    ],
    fluid=False)

if __name__ == '__main__':
    app.run_server()

To me it looks like Row behavior is exactly the same as Col. How do I get the graph figures to render on the side of the slider box?

I'm using: python: 3.10.10

plotly: 5.14.0

dash: 2.9.2

dash_bootstrap_components: 1.4.1

score 0 · Accepted Answer · answered Apr 01 '23 at 12:56

I think you can should revise your code as below to make it work.

You can add width to your Col

app.layout = dbc.Container(children=[
        dbc.Row([
            dbc.Col([
                controls
            ], width={'size': 4}),
            dbc.Col([
                dcc.Graph()
            ], width={'size': 8}),            
        ]),
    ],
    fluid=False)

Or set style for dbc.Row.

app.layout = dbc.Container(children=[
        dbc.Row([
            dbc.Col([
                controls
            ]),
            dbc.Col([
                dcc.Graph()
            ]),            
        ],style={'display':'flex'}),
    ],
    fluid=False)

And you will get something like below:

That did it! So did adding an explicit width force the row behavior? — K. A. Mendoza, Apr 01 '23 at 18:27
Yep, in a Row, there will be 12 Col so it is necessary to divide the width of the Col to fit Row. — hoa tran, Apr 03 '23 at 01:10

Plotly graph not rendering on the side of other widgets: dash_bootstrap_components Row appears identical to Col

1 Answers1