Layout documentation

Dash Python
1

Is there any proper documentation how to change the layout of your app?
I have seen a lot of different layouts in documentation regarding other things, but it is never clear what actually
makes them arrange the way they are.
I currently am trying to display images next to a graph based on hoverdata, and I cannot even find an option to resize the html.Img object. Neither can I manage to arrange them next to each other.
Sure the layout objects in the plotly graphs works fine, but as soon as something isn’t a graph I have no idea anymore how to change anything about my layout.
I tried out:

And it did not work, it just stays one column.
I looked at
Part 3. Interactive Graphing and Crossfiltering | Dash for Python Documentation | Plotly.
But it is not clear to me how the layout was achieved, and I still don’t know how to change the layout of an image.

I tried, as suggested here How to manage the layout of division/figures in dash
html.Div([html.Img(id=‘test_image’),],
style={‘width’ :450, ‘height’:450, ‘vertical-align’ : ‘right’})
but this did not do anything either
Cheers

1 Like
2

So I figured out how to get the images being displayed next to the graph with the css option with the following code:

    dcc.Tabs(id='tabs', children=[
             dcc.Tab(label='Table', 
                     children= [html.Table(id='output-data-upload')]),    #calling the table
                             
             dcc.Tab(label='Graph',
                     #calling the graph 
                     children= [html.Div([
                                     
                                     html.Div([dcc.Graph(id='migration_data')],
                                          className= 'six columns'),
                                     html.Div([html.Img(id='image-overlay'),
                                               html.Img(id='test_image')],
                                          className='six columns'),
                                               
                                 ], className='row')]
                                 
                     )
            ]),

Unfortunately in none of the threads (and here neither) there is a option with the minimal necessary components and with the millions of brackets and parentheses it took my a lot of time to figure it out.
So for anyone that might have similar problems let me break it down as simple as possible:

So width of the page is broken up in twelve columns. To place two items next to each other you need to subdivide the columns of one row between them.

You need one html.Div with className=‘row’
This html.Div contains all the other Divs that you want to assign the columns of that row too.
So all these Divs need to have className=‘x columns’

You open the div by: html.Div([content], className=‘row’)
So the content is enclosed by brackets, and the className follows after the content, outside the brackets
but enclosed in the parentheses

It sounds quite simple once I got it, but to find this out from the code I found quite difficult.

Now I just need to figure out how to change the displayed size of the image.