Dash Layout - Alignment/Positioning multiple items in the same row

Dash Python
1

Hello All,

I’ve got two items (a title and an image) that I want to put in the same row:

  • The text title should be centralized (horizontal middle) and on the top of the page

  • The image (logo) should be in the same row as the title but in the right corner of the page.

With this code below I managed to achieve sort of what I wanted as you can see in the Figure below:

# -*- coding: utf-8 -*-
import dash
import pandas
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html
from datetime import datetime as dt
from dash.dependencies import Input, Output, State

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[

    html.Div(className="row",
            style={'background': 'pink',
                   'display': 'flex-start',
                   'position': 'relative'},
            children=[
                html.Div(
                    html.H1(children="Placeholder",
                            style={'margin-top': 10,
                                   'background': 'green'}
                    ),style={'position': 'absolute',
                             'left' : '50%',
                             'transform': 'translateX(-50%)',
                             'display': 'inline-block'}
                ),
                html.Div(
                    html.Img(src='assets/aaa.png',
                             style={'background': 'white',
                                    'height': '10%',
                                    'width': '10%',
                                    'float': 'right',
                                    'marginTop': 10,
                                    'marginRight': 10,
                                    'marginLeft': 10,
                                    'marginBottom': 10}
                     ),style={'marginLeft': 'auto',
                              'display': 'inline-block'}
                )
            ])
])
if __name__ == '__main__':
    app.run_server(debug=True)

a
a2880×284 54.8 KB

As I’m new to Dash/CSS I don’t really believe this is the most appropriate/elegant way of achieving what I want. Additionally, when I reduce the window size this happens (The placeholder text go over the pink row):

b
b1006×428 27.9 KB

I know it has something to do with the absolute and relative position, but again, I did not manage to make everything work as I wanted.

  • Can anyone give me a hand here?

  • What is the best was to do this?

  • Is there any way to do where I don’t need a separate html.div for each element (text and image)?

1 Like