Flexbox in dbc.Tabs

[Raphael_Ratz]

Hi, I am trying to place a dcc.Graph in dbc.Tab. The plot is supposed to go to the bottom of the screen, so I tried to use a flexbox. My attempt at that looks like this:

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=[
                        dcc.Graph(
                            figure=px.line(x=[0, 1, 2, 3], y=[0, 1, 0, 1], title="Simple Graph"),
                            style={"flex": "1", "display": "flex", "flexDirection": "column"},
                        )
                    ]
                ),
                dbc.Tab(label="Other"),
            ],
        ),
    ],
)

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

Sadly, this doesn’t work as expected. The plot is stops well before the bottom the window.

I’ve also tried without the Tabs:

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=[
        dcc.Graph(
            figure=px.line(x=[0, 1, 2, 3], y=[0, 1, 0, 1], title="Simple Graph"),
            style={"flex": "1", "display": "flex", "flexDirection": "column"},
        )
    ],
)

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

This places the plot as I want it to.

From my research, I’ve found, that I need to set the height of the layers above the graph. However, I can’t seem to find a way to do that for the content of a dbc.Tab, only for the navigation content at the top. Is there a way to do that?

Any help would be greatly appreciated.

[AIMPED]

Hello @Raphael_Ratz,

Just a quick question: Are you trying to create different pages ? If so, you might use the pages feature:

Examples of multi-page apps with Dash Pages

I made this GitHub repo to help people get started making multi-page apps with the new Dash Pages feature available in Dash 2.5.1. It has lots of examples you can use to explore some of the great new features when using pages. You will also find other handy tips and tricks as well. If you have ideas for other examples you would like to see, please open and issue. Pull requests are welcome too! Dash pages multi-page app demos This repo contains minimal examples of multi-page apps using th…

[Raphael_Ratz]

In principle, yes. I will definitely look into that. Thank you very much. However, I would like to stick with the Tabs for navigation, so the problem stays the same.

[AIMPED]

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:

A nonexistent object was used in an `State` of

hey @MrEngineer. If you tag me using @AIMPED I’ll see your posts earlier. Concerning the choices, are you referring to my example? Here an extended example: import dash from dash import dcc, html, Input, Output import numpy as np import plotly.graph_objects as go def create_figure(): return go.Figure( go.Scatter( x=np.arange(10), y=np.random.randint(1, 10, size=10), mode='markers+lines' ) ) app = dash.Dash( __name__, ex…

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)

[Raphael_Ratz]

Yeah, that’s the only thing I have found so far as well. I was hoping to replace this approach with something more reliable and flexible. Regardless, thank you very much for your time and help.

[PipInstallPython]

Ive built out a few of these components, take a look at Dash dash dock aslso works well with light /dark mode matching the dmc components