How to span full height that left in vertical dbc.col space with dash bootstrap dbc.row?

Dash Python
2

I would suggest dropping some of the inner rows and columns in your solution. Rows and columns are only really useful when you have a row with multiple columns. Otherwise it’s just creating a lot of nesting.

Instead I think using CSS Flexbox is a good option here, because it allows you to create a column, and specify that one item should expand to fill available space. Read more about flexbox here, and about Bootstrap Flexbox utility classes here

Here’s a modified version of your example that does what you want. The second column is turned into a flex column with d-flex flex-column and we make the graph container expand to fill the available space with flex-grow-1.

import dash
import dash_bootstrap_components as dbc
from dash import html

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

graph_container = html.Div(
    style={"backgroundColor": "white"}, className="flex-grow-1"
)

content = html.Div(
    [
        html.P("This is column for content"),
        html.P("Sample text 1"),
        html.P("Sample text 2"),
        graph_container,
    ],
    className="h-100 d-flex flex-column",
)

page_structure = [
    dbc.Row(
        [
            dbc.Col(
                html.P("This is column 1"),
                style={"background-color": "cyan"},
                class_name="border",
                xs=12,
                md=2,
            ),
            dbc.Col(
                [content],
                style={"backgroundColor": "green", "height": "100vh"},
                class_name="border",
                xs=12,
                md=10,
            ),
        ],
        class_name="g-0",
    )
]

app.layout = dbc.Container(
    id="root",
    children=page_structure,
    fluid=True,
    class_name="g-0",
)

if __name__ == "__main__":
    app.run(debug=True)
1 Like