html.Div, html.H1 and html.Img Same Row?

Dash Python
1

How do you put html.H1 and html.Img on the same row?

I’ve tried style={‘display’:‘inline-blocking’} which is suppose to allow two html.Div’s to be side by side, doesn’t seem to work. I used two html.Div’s, I tried adding the style=blah within each html.H1 and html.Img components, doesn’t work. I tried nesting hml.H1 and html.Img in the same html.Div, doesn’t work.

What’s the trick?

2

Hi @twessels

Again, you where so close, use:

style={'display':'inline-block'}

Here is your last code that I added an image:

import dash
from dash.dependencies import Input, Output
import dash_table
import dash_html_components as html
import datetime
import dash_core_components as dcc


app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1( id='my_h1', style={'display':'inline-block'}),
    html.Img(src="https://cdn.benzinga.com/files/ticker-logos/std/amzn.jpg", style={'display':'inline-block', 'width': '20%', 'height': '20%'}),
    dcc.Interval(id='interval_component',
                 disabled=False,
                 interval=5*1000, # 10 seconds
                 n_intervals=0,
                 # max_intervals=-1, # -1 goes on forever no max
                ),
], )

@app.callback(Output('my_h1', 'children'),
Input('interval_component', 'n_intervals'))
def update_h1(n):
    
    current_utc = datetime.datetime.utcnow().strftime('%H:%M:%S %Y-%m-%d')
    
    return current_utc


if __name__ == '__main__':
    app.run_server(debug=True)
3

Good catch! Thank you! That definitely got me closer, all 3 elements are in the top row. But I can’t get the middle element to be centered. What’s missing from my code? The textAlign doesn’t seem to be working for html.H1…I need that to be centered, right now it’s to the left up against html.Img.

    html.Div([  # Top row heading stuff             
                dcc.Interval(id='utc_interval', disabled=False, interval=1*1000, n_intervals=0,),
                html.Img(src=app.get_asset_url('clarion_chain_logo.png'), width=50, height=50 , style={'float':'left', 'display': 'inline'}),
                html.H1(children='Clarion Chain', style={'textAlign': 'center','color': 'black', 'display':'inline-block'}),
                html.H3(id='utc',style={'float':'right', 'textAlign': 'right', 'display':'inline'}),
            ]),
4

It depends of how each element is setted by default or by the css file.

Use:

style={'border-color': 'black', 'border-style': 'solid'}

To see the borders of each element, and then adjust them using:

style={'padding-top':10}

or

style={'padding-botton':10}

or the number that fit.

or change padding with margin if you want to move the entire element.

5

I’ll give this a try, I actually got my row working partially and decided it was good enough and moved on. I still don’t fully understand nor can I see through trial and error what exactly the ‘display’:‘inline-block’ and ‘display’:‘inline’ really do.

I tried the different settings just couldn’t see any consistent behavior.

6

All the styles are css properties, see display here:
https://www.w3schools.com/cssref/pr_class_display.asp

In the same page you can see all others css.