Flexbox in dbc.Tabs

Dash Python
4

I understand that. Mixing DBC and other techniques like flexbox or styles does not always work, at least in my experience.

If I remember correctly, I switched to to using html.Div() and className sometimes:

Back to the topic: The only way I found to achieve what you are after is specifying the heights manually, but I’m not very experienced with CSS.

from dash import dcc, html, Dash
import dash_bootstrap_components as dbc
import plotly.express as px

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

app.layout = html.Div(
    style={"height": "100vh"},
    children=[
        dbc.Tabs(
            children=[
                dbc.Tab(
                    label="Graph",
                    children=[
                        html.Div(
                            dcc.Graph(
                                figure=px.line(x=[0, 1, 2, 3], y=[0, 1, 0, 1], title="Simple Graph"),
                                responsive=True,
                                style={
                                    "height": "100%",
                                    "width": "100%",
                                },
                            ),
                            style={
                                "height": "calc(100vh - 42px)",      #42px seemed to be the height of the tabs themselves, at least on my system
                                "width": "100%",
                                "background-color": "blue"
                            },
                        )
                    ],
                ),
                dbc.Tab(label="Other"),
            ],
        ),
    ],
)

if __name__ == "__main__":
    app.run(debug=True, port=8052)
2 Likes