Adjust height of page_container

Dash Python
1

I’m having trouble connecting the inheritance of a component’s height when using pages. In my example, I have a 100 px banner that’s part of app.py and I want page_container to use up all remaining vertical space, so I’m using a flex container. That much is working.

However, if I set the height of the layout of the page1.py to 100%, it doesn’t fill up the orange flex_container. I see that page_container itself is an html.Div() component–is there a way I can style it directly to have {"height": "100%"} ?

app.py:

from dash import Dash, html, page_container

app = Dash(
    name=__name__,
    use_pages=True,
)

banner = html.Div(
    ["Banner height: 100px"],
    style={
        "height": "100px",
        "background-color": "gray",
    },
)

flex_container = html.Div(
    page_container,
    style={
        "background-color": "orange",
        "flex-grow": "1",
    },
)

app.layout = html.Div(
    [banner, flex_container],
    style={
        "height": "100vh",
        "display": "flex",
        "flex-direction": "column",
    },
)

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

page1.py:

from dash import html, register_page

register_page(__name__, path="/")

layout = html.Div(
    ["Contents should fill the remaining window height."],
    style={"background-color": "tomato", "height": "100%"},
)

Above code results in:
example

1 Like
2

Hello @tcgeary,

The only way to style the container is to do it through css. :slight_smile:

#_pages_content {
    height: 100%;
}
1 Like
3

Thanks again, @jinnyzor! I’ve added your snippet to /assets/custom.css yet I’m still getting the same output. It set me on the right path though.

Inspecting the html, it looks like there’s an extra div without an id between _pages_content and my flex_container. After some searching, I can control this div by giving flex_container an id and using the immediate child selector > to edit this intermediate div. I’m a CSS novice, so I’m sure there’s a better way–but it seems to be working.

flex_container = html.Div(
    page_container,
    id="_flex_container", # added id
    style={
        "background-color": "orange",
        "flex-grow": "1",
    },
)

custom.css:

#_pages_content {
    height: 100%;
}

/* the unnamed parent of _pages_content */
#_flex_container > div {
    height: 100%;
}

working

1 Like
4

Hi @tcgeary

I was having the same issue and had come to the same conclusion about the extra Div.

I tried your css method but I found another solution that might be more versatile.

dash.page_container is actually formatted as:

Div([Location(id='_pages_location', refresh='callback-nav'), Div(id='_pages_content', disable_n_clicks=True), Store(id='_pages_store'), Div(id='_pages_dummy', disable_n_clicks=True)])

After the imports in my App.py, I added:

 dash.page_container = html.Div([dcc.Location(id='_pages_location', refresh='callback-nav'), html.Div(id='_pages_content', disable_n_clicks=True, style={"height": "100%"}), dcc.Store(id='_pages_store'), html.Div(id='_pages_dummy', disable_n_clicks=True)], style={"height": "100%"}, id="parent_page_content"))

This maintained the page_container’s functionality (I assume _pages_location and _pages_contentare the important parts), but this gives easier freedom to customize those divs.

Not too sure why the dummy_div is there but I didn’t want to touch it haha.

Excuse the formatting, but just thought I should share in case anyone else stumbles on this thread!

1 Like