Aligning objects

Dash Python
#1

I have made a dashboard that looks like the following (the code will be at the end). Now I have two problems with it.

  1. I cannot get the map to fill all the empty area under it.
  2. I cannot get the scatter plot on the right to fill its span and match the edge of the map plot. (I’m using it as a way to show the distribution of the points so the user can set the range slider for better visualization so bonus point if you can lead me to a better way.

I’ve watched a few videos and looked up tutorials that use bootstrap but if I have understood it well it’s just setting the width and height in the style. Now it can be manual or predefined.

Screen Shot 2020-05-09 at 2.38.38 PM
Screen Shot 2020-05-09 at 2.38.38 PM2852×1514 571 KB 

app.layout = html.Div([
    html.Div([
        html.Div([...], style={'width': '45%', 'height': '20%', 'display': 'inline-block', 'padding': 10}),
        html.Div([...], style={'width': '45%', 'height': '20%', 'display': 'inline-block', 'padding': 10}),
        html.Div([
            html.Div([dcc.Graph(id='the_map')], style={'width': '80%', 'display': 'inline-block', 'margin': zm}),
            html.Div([dcc.RangeSlider(id='range_sl', allowCross=False, vertical=True)], style={'width': '2%', 'display':'inline-block', 'margin': zm}),
            html.Div([dcc.Graph(id='scatter', config={'displayModeBar':False})], style={'width': '18%', 'display': 'inline-block', 'margin':zm} ),
            html.Div(id='cs_sel_div', style={'display':'none'})
        ], style={'height': '80%'})
    ]),
])

My understanding is that the first two Divs should take 20% of the top of the screen (each half).
The bottom 80% should be the three elements I have and they should inherit the height from their parent to fill the whole 80%. But, it seems I’m wrong so heeellpppp

#2

I would appreciate any input about this question.

#3

Hey @anish, this is not really a Dash question but more of a generic html/CSS question and you would probably get faster answers on Stack overflow for those. But anyway, here’s an answer.

The thing with height as a percent is that it only works if the parent has its height defined. In your case, the wrapper div does not define that it should be the full height of the window. In this instance, the heights that you set will simply be ignored.

If you want to have your object height based on the window’s use vh (which stands for viewport height) instead of %.

In your case you can either set the wrapper div to have 'height': '100vh' or set the height of each of your objects ('height': '20vh' and 'height': '80vh').

Hope this helps.