Tab not inheriting parent height

Dash Python
1

I’m trying to set the relative height of the contents of a tab to match that of its parent by setting style={"height":"100%"} for a dcc.Tab component. My layout consists of an html.Div with a 100% viewport height.

Here’s the simplest example I could think of. I expected orange_div to fill up the page. Forcing orange_div to have style={"height":"100vh"} will do this, but for my application the units need to be %, not vh or px.

from dash import Dash, html, dcc

app = Dash(name=__name__)

orange_div = html.Div(
    children=["Tab contents should fill the window height."],
    style={
        "height": "100%",  # not inheriting parent height
        "background-color": "orange",
    },
)

tabs = dcc.Tabs(dcc.Tab(orange_div, label="Tab 1", style={"height": "100%"}))

app.layout = html.Div(tabs, style={"height": "100vh"})

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

current_behavior
current_behavior820×464 3.64 KB


If I remove the tabs entirely, it works, leading me to think the issue is with my usage of dcc.Tabs.

orange_div = html.Div(
    children=["Contents fill the window height."],
    style={
        "height": "100%",  # correctly inheriting parent height
        "background-color": "orange",
    },
)

app.layout = html.Div(orange_div, style={"height": "100vh"})

desired_behavior
desired_behavior911×530 3.42 KB


Any idea what I’m doing wrong?

1 Like
2

Hello @tcgeary, try setting your orange_div to 100vh instead of 100%

orange_div = html.Div(
children=[“Tab contents should fill the window height.”],
style={
“height”: “100vh”, # not inheriting parent height
“background-color”: “orange”,
},
)

from dash import Dash, html, dcc

app = Dash(name=__name__)

orange_div = html.Div(
    children=["Tab contents should fill the window height."],
    style={
        "height": "100vh",  # not inheriting parent height #use vh not %
        "background-color": "orange",
    },
)

tabs = dcc.Tabs(dcc.Tab(orange_div, label="Tab 1", style={"height": "100%"}))

app.layout = html.Div(tabs, style={"height": "100vh"})

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

Capture
Capture1074×718 16.6 KB

2 Likes
3

Hi @payton-dev , thanks for the reply. Unfortunately, it’s important that orange_div inherits its height from its parent and doesn’t use a viewport height. A real world example would be two rows of content where one has an absolute height (e.g., 200px) and the other needs to use the remainder of the vertical space. Depending on the size of the browser window, the second row will use a different fraction of the viewport height.

4

What happens if you add a minHeight: 100%?

5

Hi @jinnyzor , thanks for the suggestion. I’ve added a fixed-height top_div to better illustrate my issue. Adding "min-height":"100%" (or “minHeight”) didn’t have an effect.

I think the issue is with the height of dcc.Tab not responding to the style property how I’d expect it to. Even if I set dcc.Tab to have style={"height": "500px"}, the tab content height doesn’t change.

From the docs:

style (dict ; optional): Overrides the default (inline) styles for the Tab component.

I’m not sure what “inline” means here. Does style not apply to the body of the Tab?

from dash import Dash, html, dcc

app = Dash(name=__name__)

top_div = html.Div(
    ["Height: 200px"],
    style={
        "height": "200px",
        "background-color": "cyan",
    },
)

orange_div = html.Div(
    children=["Height: 100%. Contents should fill the remaining window height."],
    style={
        "height": "100%",
        "min-height": "100%",
        "background-color": "orange",
    },
)

tab = dcc.Tab(
    orange_div,
    label="Tab 1",
    style={
        "height": "500px",  # does nothing
        "background-color": "red",
    },
)

tabs = dcc.Tabs(tab)

app.layout = html.Div([top_div, tabs], style={"height": "100vh"})

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

fixed_height
fixed_height823×536 4.45 KB

6

Here you are:

from dash import Dash, html, dcc

app = Dash(name=__name__)

top_div = html.Div(
    ["Height: 200px"],
    style={
        "height": "200px",
        "backgroundColor": "cyan",
    },
)

orange_div = html.Div(
    children=["Height: 100%. Contents should fill the remaining window height."],
    style={
        "height": "100%",
        "minHeight": "100%",
        "backgroundColor": "orange",
    },
)

tab = dcc.Tab(
    orange_div,
    label="Tab 1",
)

tabs = dcc.Tabs(tab, content_style={
        "height": "500px",
        "backgroundColor": "red",
    },)

app.layout = html.Div([top_div, tabs], style={"height": "100vh"})

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

The tab style does nothing but style the unselected tab element, there are other options for this styling as well. :slight_smile:

What you were looking for was content_style under the dcc.Tabs.

2 Likes
7

Thank you! I was missing both content_style and parent_style in dcc.Tabs. Both seem to be needed if using "height":"100%".

Unfortunately, this causes dcc.Tab to have 100vh in addition to the 200px element at the top. But this issue is independent of dcc.Tabs and almost certainly stems from my misunderstanding of CSS, so I’m marking this as solved. Thanks!

from dash import Dash, html, dcc

app = Dash(name=__name__)

top_div = html.Div(
    ["Height: 200px"],
    style={
        "height": "200px",
        "background-color": "cyan",
    },
)

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

tab = dcc.Tab(orange_div, label="Tab 1")

tabs = dcc.Tabs(
    tab,
    content_style={
        "height": "100%",
    },
    parent_style={
        "height": "100%",
    },
)

app.layout = html.Div([top_div, tabs], style={"height": "100vh"})

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

What you could do is use a flex box with the content, that way you dont have to worry about hard coding or not for the tabs.