Divide my dashboard into two columns in Python Dash

user_17105446 0
Viewed 3426

I tried now for some time to divide my dashboard into two columns, with "Material1" centered in the first column, and "Material2" centered in the second column, keeping the graph as is (entire width) of this dashboard:

enter image description here

I tried dbc.col and dbc.Row methods to solve this, but haven't found the right way to do this.

Any help is highly appreciated!! :)

This is my code:

app.layout = html.Div([
          
    # Input Row: Material 1
    
    html.Div([
    
    html.Label('Material 1'),
    dcc.Dropdown(
        id='dropdown1',
        options=[{'label': k, 'value': k} for k in all_options.keys()],
        value=options1[0],
        style={'width': '400px', 'margin-left': 0}),
    
    ]),
    
    html.Div([
    
    html.Label('m3'),
    daq.NumericInput(
        id='numeric-input-1',
        min=0,
        max=200,
        value=0,
        style={'width': '200px', 'margin-left': 0}),
    
    ]),
    
    # Input Row: Material 2
    
    html.Div([
    
    html.Label('Material 2'),
    dcc.Dropdown(
        id='dropdown2',
        options=[{'label': k, 'value': k} for k in all_options.keys()],
        value=options1[0],
        style={'width': '400px', 'margin-left': 0}),
    
    ]),
    
    html.Div([
    
    html.Label('m3'),
    daq.NumericInput(
        id='numeric-input-2',
        min=0,
        max=200,
        value=0,
        style={'width': '200px', 'margin-left': 0}),
    
    ], style={'display': 'inline-block'}),
    
    # Input: Indicator
    
    html.Div([
    
    html.Label('Indicator'),    
    dcc.Dropdown(
        id='dropdown3', 
        style={'width': '400px', 'margin-left': 0}),
        
    ]),
    
    #Graph
    
    html.Div([
        
    dcc.Graph(
        id='display-selected-values',
        style={'width': '2400px', 'margin-left': 0, 'columnCount': 1}),
    ])
    
])
plotly-python plotly-dash plotly python
1 Answers
  • it's all about being systematic (where code formatters help)
  • using dash 2.0.0 and dbc 1.0.0-b1
  • keep on embedding Row and Col as required to meet your layout requirements
import json
import numpy as np
import dash_bootstrap_components as dbc
import dash
from jupyter_dash import JupyterDash

all_options = {k: v for k, v in zip(list("ABCD"), np.random.randint(1, 4, 4))}
options1 = list(all_options.keys())
# Build App
app = JupyterDash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dash.html.Div(
    [
        dbc.Row(
            [
                dbc.Col(
                    dbc.Row(
                        [
                            dash.html.Label("Material 1"),
                            dash.dcc.Dropdown(
                                id="dropdown1",
                                options=[
                                    {"label": k, "value": k} for k in all_options.keys()
                                ],
                                value=options1[0],
                                style={"width": "400px", "margin-left": 0},
                            ),
                        ],
                        justify="center",
                    ),
                ),
                dbc.Col(
                    dbc.Row(
                        [
                            dash.html.Label("Material 2"),
                            dash.dcc.Dropdown(
                                id="dropdown2",
                                options=[
                                    {"label": k, "value": k} for k in all_options.keys()
                                ],
                                value=options1[0],
                                style={"width": "400px", "margin-left": 0},
                            ),
                        ],
                        justify="center",
                    ),
                ),
            ],
            justify="center",
        ),
        dash.dcc.Graph(id="newCases", style={"height": "45vh"}),
    ],
    style={"font-family": "Arial", "font-size": "0.9em", "text-align": "center"},
)


# Run app and display result inline in the notebook
app.run_server(mode="inline")
user_94414040
Related