CODEWITHSUNDEEP
pythonplotlyplotly-dash
bhola prasad
bhola prasad

Reputation: 725

Plotly Dash - Text is not getting aligned with the Graph

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 - plot_image

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.

Upvotes: 0

Views: 1183

Answers (1)

coralvanda
coralvanda

Reputation: 6596

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.

Upvotes: 1

Related Questions