Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Drop down not reappearing properly

I’m trying to hide a dropdown until a file is uploaded, the hiding works, but once the file is uploaded and the dropdown re-appears - it appears shrunk (code and screenshot below) - what’s causing this and how can it be solved?

Code to reproduce:
import base64
import datetime
import io

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt

app = dash.Dash()

app.scripts.config.serve_locally = True
app.config['suppress_callback_exceptions']=True

app.layout = html.Div([
    html.Div([
            dcc.Dropdown(id='dropdown', options=[{'label':'A', 'value':'1'}, {'label':'B', 'value':'2'}, {'label':'C', 'value':'3'}], value=None)
        ], style={'width': '20%', 'display': 'inline-block'}
    ),    
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
            'width': '100%',
            'height': '60px',
            'lineHeight': '60px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '10px'
        },
        # Allow multiple files to be uploaded
        multiple=True
    )
])

@app.callback(Output('dropdown', 'style'), [Input('upload-data', 'contents')])
def update_columns_dropdown_style(jsoned_data):
    if jsoned_data is not None:
        print 'make dropdown visible'
        return {'width': '20%', 'display': 'inline-block'}
    return {'display': 'none'}

app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

Screenshot:

Sorry, just found the error (on my side) - I was trying to hide the control instead of the container