Hi everyone,
I am creating a single page Dash in Julia. And I manage to get the desired layout, a page of SimpleNavBar and two content rows. Each row occupies 50% of the height. However, when I add a graph component into the rows, the height of the graph overflows its row block. This is a problem as the contents are no longer contained in one page. How can I configure the dcc_graph so that the height and width of figure are inherited from the parent row/col/container? I did try the responsive option, but it did work.
Below are the MWE and a snapshot. I know it is rather an easy problem. Having recently moved from the R/Flexdashboard ecosystem to Julia/Dash, it is still a learning curve for me. Appreciate all advices!
using PlotlyJS, Dash, DashBootstrapComponents
# =============================================================================
# Define the static content
dummylinechart() = plot([
scatter(y=rand(20), name="Line 1"),
scatter(y=rand(20), name="Line 2"),
])
# =============================================================================
# Define the app structure and connectivity
app = dash(external_stylesheets=[dbc_themes.BOOTSTRAP]);
app.title = "dash_template"
app.layout = html_div([
dcc_location(id="url"),
# Navigation bar layout
dbc_navbarsimple(
children = [
dbc_navitem(dbc_navlink("Page", href = "/page1")),
],
brand = "Template",
brand_href = "/",
color = "primary",
dark = true,
links_left = false,
class_name = "py-0",
),
# Content block layout
dbc_container(
children=[
# First row
dbc_row(
dbc_col(
dcc_graph(
figure=dummylinechart(),
config=Dict("responsive" => true),
),
style=Dict(
"height" => "100%",
"background-color" => "#5bc0de"
),
),
class_name="h-50",
),
# Second row
dbc_row(
dbc_col(
html_p("block2"),
style=Dict(
"height" => "100%",
"background-color" => "#5cb85c"
),
),
class_name="h-50",
),
],
id="page-content",
style=Dict(
"height" => "95vh",
"background-color" => "#f9f9f9",
"padding" => "1rem"
),
fluid=true,
)
]);
