Dcc component option (css style) not working

📊 Plotly Python
1

Hello, I am working on Dash to build a web application for machine learning.
I tried simple code below to build a dropdown for selection of variable.
When I tried the style width as percentage, it worked properly.
(Ex) style = {“width”:‘50%’})
However, my problem is that my option for css style for dropdown component like this
style = {“width”:’ calc(100%-10px);'}
does not seem to work, just displaying default full size 100% components.
I’ve look through various examples on google, but cannot find the difference.
Is there something else to be considered? Thank you.

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets, prevent_initial_callbacks=True)
app.layout = html.Div([
html.H1(‘Test’),
html.Div([
dcc.Dropdown(
id=‘input-dropdown’,
options=[
{‘label’:‘A’, ‘value’: ‘A’}, {‘label’:‘B’, ‘value’:‘B’}],
value = None, style = {“width”:‘calc(100%-10px);’}),
html.Div(id=‘output-dropdown’,hidden=True),
]),
])

@app.callback(
Output(‘output-dropdown’, ‘children’),
Input(‘input-dropdown’, ‘value’),
prevent_initial_call = True
)

def select_value(value):
if value is None:
raise PreventUpdate
else:
print(value)
return value

if name == ‘main’:
app.run_server(debug=True)

2

Hi @yjkwak

You can use a css file to do that, you need to have a folder named “assets” in the same folder where you have the app.

Any css file in the assets folder will be loaded when the app starts.

In your css file just add this:

#input-dropdown {
  width: calc(100% - 10px);
}
4

Thanks, it works perfectly!

1 Like