It seems like one cannot directly assign CSS classes to dcc.Dropdown directly. I was trying to vertically split my view between a label and the dropdown, and I tried to do it with the following css + app.py:
.label {
display: inline-block;
width: 15%;
}
.dropdown {
display: inline-block;
width: 80%;
}
import dash
from dash import dcc, html
app = dash.Dash(__name__)
app.layout = html.Div(
[html.Div('Make your choice', className='label'),
dcc.Dropdown(['a', 'b'], className='dropdown'),
]
)
if __name__ == '__main__':
app.run_server(debug=True)
This results in the following page:
If I add a style parameter directly to dcc.Dropdown, I can achieve the alignment I want:
import dash
from dash.dependencies import Input, Output
from dash import dcc, html
app = dash.Dash(__name__)
app.layout = html.Div(
[html.Div('Make your choice', className='label'),
dcc.Dropdown(['a', 'b'], className='dropdown', style={'width': '80%', 'display':'inline-block'}),
]
)
if __name__ == '__main__':
app.run_server(debug=True, port=8051)
