Plotly Dash - Text is not getting aligned with the Graph

Question

Even though I created two divisions, the text from the second division gets displayed in the first division. It can be seen in the fig below -

Code that I used to make it -

###### Runs Distributions
html.H2("Runs Distributions"),
# Histogram of Runs Distributions
html.Div(
    [
        html.Div(
            [
                html.P(
                    "We can see that the distribution is right skewed. Many "
                    "players makes low or medium runs, while few players makes "
                    "lots of runs. The median of this distribution is 126 which "
                    "means that 50% of the players makes less than 126 runs and  "
                    "50% more than this. 406 is the 90th percentile, meaning 90% "
                    "of the players makes less than 406 runs. So, any players who "
                    "is making more than 400 runs in a season is really doing well. "
                    "They are in the top 10%."
                )
            ],
            style={
                "width": "35%",
                "display": "inline-block",
                "margin-top": "60px",
            },
        ),
        html.Div(
            [dcc.Graph(id="runs-dist-plot", figure=runs_dist_plot)],
            style={"width": "65%", "float": "right", "display": "inline-block"},
        ),
    ],
    style={"margin": "40px"},
),
# Kernal density estimation of Runs distributions
html.Div(
    [
        html.Div(
            [html.P("Gonna Write something.")],
            style={
                "width": "35%",
                "display": "inline-block",
                "margin-top": "60px",
            },
        ),
        html.Div(
            [dcc.Graph(id="runs-kde-plot", figure=runs_kde_plot)],
            style={"width": "65%", "float": "right", "display": "inline-block"},
        ),
    ],
    style={"margin": "40px"},
),

Can't able to understand why is this happening? One way is to adjust the margin-top style of the paragraph tag which is in the second division but I have many graphs to plot below these. So, it would be very tedious to change the values with trial and error with every plots. Is there a way to set this once for future plots.

Have you tried setting an explicit height value for the top division? — coralvanda

coralvanda coralvanda · Accepted Answer · 2020-09-25T21:57:08

I ran this locally with some placeholders for your graphs, and was able to get the text down with the second graph using a height value for the first division. Where you have:

style={"margin": "40px"},

I changed to:

style={"margin": "40px", "height": 500},

If you want to align the text within the second division, then you'll need to adjust it from the top of its box.

My preferred way for handling all of this is by using flexbox, but that would require making several more changes and doing away with the inline-block that you have, so I made only the smallest change I could here.

Plotly Dash - Text is not getting aligned with the Graph

1 Answers