Black Lives Matter. Please consider donating to Black Girls Code today.

Responsive Dash using Dash Bootstrap Components

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.

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.

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/