Using dash bootstrap components, is there a way to make dbc.card fill the height of its parent div so it updates dynamically? Additionally, I have a figure in the card that I wish to expand to fill the card. What’s the best way of doing this?
2 Likes
Hey Jules,
Ever get this solution? I’ve stumbled across this need as well!
1 Like
Bumping cause I’ve long wanted this.
From the documentation:
figure.layout.autosize- ifTrue, sets the height and width of the graph to that of its parent container
You would think this would do it, but it sets the height & width necessary to fit the graph as a square. It does not actually adjust both the height and width to fill the graph.
1 Like
i ended up including in a for loop that identifies all dynamic situations in my callback. Luckily, there were only three situations. Warn, Fail, Pass.
I think there might be a default height of 450px set in dcc.Graph, if you add style={"height":"100%"} or with bootstrap: className="h-100" then the graph will fill the parent container.
Here’s an example:
from dash import Dash, dcc, html
import plotly.express as px
import dash_bootstrap_components as dbc
df = px.data.tips()
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
[
dbc.Card(
dcc.Graph(figure=px.bar(df, x="day", y="total_bill"),
className="h-100"
),
style={"height": 700},
className="p-4 bg-secondary",
)
],
fluid=True,
)
if __name__ == "__main__":
app.run_server(debug=True)
I added some background color to the card so you can see the card vs the graph. This is what it looks like with the height set to 100%
And this is without height set to 100%
1 Like