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:
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
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.