Search code examples
pythonplotlyplotly-dashplotly-python

Aligning 2 html.Divs of text next to each other in Plotly Dash

I am trying to place 2 Div elements side by side, without luck. I have been following https://community.plotly.com/t/horizontally-stack-components/10806 and https://medium.com/analytics-vidhya/dash-for-beginners-dash-plotly-python-fcd1fe02b749 guides on using width<50% and 'display': 'inline-block' but without luck.

If you look at attached pictures, it looks like the block that is supposed to go to the right, actually does, until i update the page by choosing a song in the list to show the lyrics on the left, then it pushes the recommendations to the bottom. Any ideas?

My code looks like this:

html.Div([
            html.Div(id="lyrics",style={'width': '50%', 'display': 'inline-block'}),
            html.Div([
            html.H6(id="recommendations",children="Recommendations:"),
            html.H3(id="songsbysameartist",children='Songs by the same artist:',
                    ),
            html.H6(id="sameartistrecommendations",
                    ),
            html.H3(id="songsfromotherartists",children='Music from other artists that you might also like:',
                   ),
            html.H6(id="otherartistrecommendations",
                )
            ],
            style = {'width': '30%', 'display': 'inline-block'})
            ])

edited code would look like this:

html.Div([
            html.Div(id="lyrics",style={'width': '50%', 'display': 'inline-block'}),
            html.Div([
            html.H6(id="recommendations",children="Recommendations:"),
            html.H3(id="songsbysameartist",children='Songs by the same artist:',
                    ),
            html.H6(id="sameartistrecommendations",
                    ),
            html.H3(id="songsfromotherartists",children='Music from other artists that you might also like:',
                   ),
            html.H6(id="otherartistrecommendations",
                )
            ],
            style = {'width': '30%', 'display': 'flex'})
            ])

since the bottom style is connected to the parent Div above recommendations as far as I can tell. enter image description here

enter image description here

Solution

  • I found the solution:

    I believe the error is in the structure. Parent Div needs to have "display":"flex" while the 2 children Div elements have "display":"inline-block".

    Correct code ended up like this:

    html.Div([
                    html.Div([
                        html.Div(id="songandartist",style={'display': 'flex',"fontSize" : 40,"marginBottom":50}),
                        html.Div(id="lyrics",style={'display': 'flex'}
                        )
                    ],style={'width': '49%', 'display': 'inline-block'}),
                    html.Div([
                        html.Div(id="recommendations",children="Recommendations:",style={"fontSize" : 40,"marginBottom":50,'display': 'flex'}),
                        html.Div(id="songsbysameartist",style={"fontSize" : 27,'display':'flex'},children='Songs by the same artist:',
                        ),
                        html.Div(id="sameartistrecommendations",style={"marginBottom":50,'whiteSpace': 'pre-line','display': 'flex'}
                        ),
                        html.Div(id="songsfromotherartists",style={"fontSize" : 27,'display': 'flex'},children='Music from other artists that you might also like:',
                       ),
                        html.Div(id="otherartistrecommendations",style={'whiteSpace': 'pre-line','display': 'flex'}
                    )
                    ],
                style = {'width': '49%', 'display': 'inline-block'})
                ],style={"display": "flex"})