Center column (of 3-column layout) with dropdown menu not formatting as expected

Dash Python
1

I’ve mocked up a simple 3-column layout, with a graph in each column (defined by style={‘width’: ‘33%’} for each html.Div). When I add a dropdown menu to the top of the middle column, the entire display ‘shifts’ to the bottom of the display within the middle column. When I add a dropdown menu to the top of the first and middle columns, the middle column formats as expected, in line with the adjacent columns. Any ideas?

image
image.png2480×1008 78.4 KB 

import dash
import dash_core_components as dcc
import dash_html_components as html


#Define Dash App
app=dash.Dash()
   
    
app.layout = html.Div([
    html.Div([
#        html.Label('Multi-Select Dropdown'),
#        dcc.Dropdown(
#            options=[
#                {'label': 'New York City', 'value': 'NYC'},
#                {'label': u'Montréal', 'value': 'MTL'},
#                {'label': 'San Francisco', 'value': 'SF'}
#                ],
#            value=['MTL', 'SF'],
#            multi=True
#        ),
        dcc.Graph(
            id='example-graph',
            figure={
                'data': [
                    {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar'}
                ],
                'layout': {
                    'title': 'Dash Data Visualization',
                    'height':500
                    }
                }
            ),
        ],
        style={'width': '33%', 'display': 'inline-block'}
        ),  

    html.Div([
        html.Label('Multi-Select Dropdown'),
        dcc.Dropdown(
            options=[
                {'label': 'New York City', 'value': 'NYC'},
                {'label': u'Montréal', 'value': 'MTL'},
                {'label': 'San Francisco', 'value': 'SF'}
                ],
            value=['MTL', 'SF'],
            multi=True
        ),
       
        dcc.Graph(
            id='example-graph3',
            figure={
                'data': [
                    {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar'}
                ],
                'layout': {
                    'title': 'Dash Data Visualization',
                    'height':250
                    }
                }
            )
        ],
        style={'width': '33%', 'display': 'inline-block'}
        ),
    
    html.Div([
        dcc.Graph(
            id='example-graph4',
            figure={
                'data': [
                    {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar'}
                ],
                'layout': {
                    'title': 'Dash Data Visualization',
                    'height':500
                    }
                }
            )
        ],
        style={'width': '33%', 'display': 'inline-block', 'float': 'right'},
        )
    ]
)

        
if __name__ == '__main__':
    app.run_server()
2

HTML can be so finicky sometimes. It looks like it might be an issue with the <label/>. I removed that, and it moved back up. I’m not sure why this is.

To debug these types of issues, I recommend playing around with the rendered elements in Chrome’s Dev Tools. You can modify the CSS styles attributes and also move elements around. Here’s a GIF of those dev tools:

three-column
three-column.gif2541×1358 1.83 MB

For this particular issue, I recommend using or forking this CSS file: https://codepen.io/chriddyp/pen/bWLwgP and using the className="four columns" in the section of the grid.

3

Awesome, thanks for the quick reply.