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:
