Responsive Dash using Dash Bootstrap Components

Dash Python
1

Hello,

I am trying to create a responsive dashboard app using dbc, but I have a problem with the columns since I do not get them to have the same height and the content within them is not aligned…

This is my MWE

dbc.Row(
   [
      dbc.Col(
           html.Div([dbc.Col(html.Div()),...,dbc.Col(html.Div())])
      ),
      dbc.Col(
         [
            dbc.Row(
                 [html.Div(), html.Div(), html.Div(), html.Div()]
            ),
            dbc.Row(
                 html.Div(dcc.Graph())
            )
         ]
      )
   ]
)

Here is a reproducible example: https://gyazo.com/bce08061e29a1208ef9890a227a50260

As you can see, when I use the options of the dcc.RadioItems the content changes which causes the elements to change in size but not remain at the same height level.

Thanks in advance.

2

Looks like your row/columns are a bit mangled:

  1. You have cols within cols but without a row combing between
  2. You have two rows that don’t have columns in them

Bootstrap’s grid is unhappy with these kinds of things.

3

Hi,

I’m sorry I made a typing mistake in my code. My code really looks like this:

dbc.Container(
     [
           dbc.Row(
                 [
                        dbc.Col(
                               html.Div(<here the left panel...>)
                        ),
                        dbc.Col(
                               dbc.Row([dbc.Col(html.Div()), dbc.Col(html.Div()), dbc.Col(html.Div()), dbc.Col(html.Div())]),
                               dbc.Row(dbc.Col(html.Div(<here the dcc.Graph>)))
                        )
                ]
            )
     ]
)

What I am really trying is that when the window is resized the dcc.Graph also as in this app https://dash-gallery.plotly.host/dash-oil-and-gas/